agel-form | 使用文档

# Radio Checkbox 选择框

agel-radio 组件是基于 el-radio el-radio-group 组件的二次封装组件。

agel-checkbox 组件是基于 el-checkbox el-checkbox-group 组件的二次封装组件。

# 使用

options 属性支持多种数据类型，String，Array[String]，Array[Object]，Promise，Function，若是 Function 类型，可以通过 getOptions 进行主动刷新。

value 属性多选时可为数组 [xx1,xx2] 或者字符串 xx1,xx2，逗号间隔，默认为字符串。

border 属性实现边框样式风格，button 属性可实现按钮样式风格。

若是配置了 options 属性，渲染的就是 group 组件，反正则是组件本身。

点击查看代码 
<template>
  <div class="demo border">
    <agel-checkbox v-model="value">选择框</agel-checkbox>
    <agel-checkbox v-model="checkbox" :options="options">
      <template v-slot:option="{option}">
        <el-tag>{{option.label}}</el-tag>
      </template>
    </agel-checkbox>
    <agel-radio v-model="radio" :options="options"></agel-radio>

  </div>
</template>
 
<script>
export default {
  data() {
    return {
      value: true,
      checkbox: "1,2",
      radio: "2",
      options: [
        { label: "多选框", value: "1" },
        { label: "单选框", value: "2" },
      ],
    };
  },
};
</script>

# 演示

点击查看代码 
<template>
  <agel-form class="demo border" v-model="form"></agel-form>
</template>
 
<script>
export default {
  data() {
    return {
      form: {
        span: 24,
        data: {
          slotStyle: "感觉,非常,灵活",
        },
        items: {
          borderStyle: {
            label: "border 样式",
            component: "el-radio",
            border: true,
            slots: "边框",
            $component: {
              label: "radio组件的label属性",
            },
          },
          buttonStyle: {
            label: "button 样式",
            component: "el-radio",
            button: true,
            props: { label: "name", value: "id" },
            options: [
              { name: "男", id: "男" },
              { name: "女", id: "女" },
              { name: "中性", id: "中性" },
            ],
          },
          slotStyle: {
            label: "插槽 样式",
            component: "el-checkbox",
            options: ["感觉", "非常", "灵活"],
            slots: {
              option: ({ option, index }) => {
                return (
                  <el-tag>
                    {index}：{option.label}
                  </el-tag>
                );
              },
            },
          },
          radio: {
            label: "评价",
            component: "el-radio",
            options: ["好用", "一般", "糟糕"],
          },
          checkbox: {
            label: "随机数",
            component: "el-checkbox",
            max: 2,
            options: async () => {
              let data = await this.$http.get("/api/getRandomData");
              return data;
            },
          },
          button: {
            component: "el-button",
            type: "primary",
            slots: "刷新 options",
            span: 24,
            on: {
              click: () => {
                this.form.getRef("checkbox").getOptions();
              },
            },
          },
        },
      },
    };
  },
};
</script>

# Radio Checkbox Attributes

属性 类型 默认值 说明
value String/Array - 绑定值
options String/Array/Function/Promise - option 配置项
props Object {label,value} 数据配置选项
border Boolean - 是否开启 border 样式
button Boolean - 是否开启 button 样式
active-value Boolean/String/Number true checkbox 已勾选时的值
inactive-value Boolean/String/Number false checkbox 未勾选时的值
...... ...... ...... el-checkbox-group 属性 (opens new window)
...... ...... ...... el-radio-group 属性 (opens new window)
...... ...... ...... el-checkbox 属性 (opens new window)
...... ...... ...... el-radio 属性 (opens new window)

# Radio Checkbox Option

属性 类型 默认值 说明
label String - label 名称
value String/Number - value 值
style String/Object - 内联样式
class String/Object/Array - class名称
...... ...... ...... el-radio 属性 (opens new window)
...... ...... ...... el-checkbox 属性 (opens new window)

# Radio Checkbox Slots

属性 说明
default 选择框默认插槽
option 每一个选择项插槽，参数 {option,index}

# Radio Checkbox Methods

属性 参数 说明
getOptions - 刷新数据， options 为 Function 时可调用
getValueOption value 返回 value 所对应的 option 对象，多选时为数组

# Radio Checkbox事件

属性 参数 说明
...... ...... 支持 el-radio Events (opens new window)
...... ...... 支持 el-checkbox Events (opens new window)

← Select 选择器 →