checkbox 复选框

复选框

基本用法

<template>
    <dn-page>     
      <dn-form ref="formRef" v-bind="formOptions"></dn-form>      
    </dn-page>   
  </template>
  
<script lang="jsx">
import {ref,defineComponent} from "vue";
import { useForm } from "@sdevnet/devnet-form";

const formRef = ref();
const formOptions = ref();
function createFormOptions() {
  const { buildFormOptions } = useForm();
  return buildFormOptions({
    columns: {
      fn1:{
        title: "复选框",
        type: "checkbox",
        form: {          
          col:{span:24},
          props:{
            value:1,
            text:'同意选项',
            events:{
              change:(scope)=>{
                console.log(scope);
              }
            }                
          }            
        }
      },
      fn2:  {
        title: "复选框列表",
        type: "checkboxlist",
        form: {
          col:{span:24},
          props:{
            valueMember:'id',
            textMember:'text',           
            options:[
                {
                    text:'复选框1',
                    id:'1'
                },
                {
                    text:'复选框2',
                    id:'2'
                },
                {
                    text:'禁止勾选',
                    id:'3',
                    disabled:true
                }
            ],
            events:{
              onChange:(scope)=>{
                console.log('changed',scope);
              }
            }        
          }                   
        }
      },
    },
    form: {
        labelWidth: "120px",
        'labelPosition':'left',
      }
  });
}

function initFormOptions() { 
  formOptions.value = createFormOptions();
  formOptions.value.initData = { fid:1,fn2:'2' };

  return {
    formOptions,   
    formRef
  };
}

export default defineComponent({
  setup() {
    return {
      ...initFormOptions()
    };
  }
});
</script>

checkbox API

PropsName	Description	Type	Default
key	字段名称子组件column配置	json
└ title	标题	string
└ type	checkbox checkboxlist	string
└ form	表单栏位配置	json
└└ rules	验证规则，参考原生el配置	array
└└ col	el-col配置，参考原生组件	json
└└ component	原生组件属性	json
└└└ key	参考原生el组件
└└ props	组件属性	json
└└└ value	单个复选框时的Value	object
└└└ text	单个复选框时的显示的文本	string
└└└ valueMember	选项的值字段	string
└└└ textMember	选项的文本字段	string
└└└ options	选项数组	array
└└└└ json	选项json
└└└ events	组件事件
└└└└ onChange	值change触发
└└ tooltip	输入提示内容	string
└└ order	排序	number
└└ show	是否显示	boolean
└└ blank	是否空占位	boolean
└└ prefixRender	组件左边render
└└ suffixRender	组件右边render

checkbox Exposes

Name	Description
ctlRef	原生组件引用