Switch开关

基础用法

表示两种相互对立的状态间的切换，多用于触发「开/关」

通过将type属性的值指定为switch,同时配置dicData为字典值

<avue-form :option="option"></avue-form>
<script>
export default {
  data(){
    return {
       option:{
          column: [{
            label: '开关',
            prop: 'switch',
            type: 'switch',
            dicData:[{
              label:'关',
              value:0
            },{
              label:'开',
              value:1
            }]
          }]
       }
    }
  }
}
</script>

Expand Copy Copy

默认值

value属性可以提供一个初始化的默认值

<avue-form :option="option"></avue-form>

<script>
export default{
  data() {
    return {
      option: {
        column: [
         {
            label: '开关',
            prop: 'switch',
            type: 'switch',
            dicData:[{
              label:'关',
              value:0
            },{
              label:'开',
              value:1
            }],
            value:1
         }
        ]
      }
    }
  }
}
</script>

Expand Copy Copy

禁用状态

通过disabled属性指定是否禁用

<avue-form :option="option"></avue-form>

<script>
export default{
  data() {
    return {
      option: {
        column: [
         {
            label: '开关',
            prop: 'switch',
            type: 'switch',
            dicData:[{
              label:'关',
              value:0
            },{
              label:'开',
              value:1
            }],
            disabled:true
         }
        ]
      }
    }
  }
}
</script>

Expand Copy Copy

字典属性

指定标签文本和值，默认为label和value

配置props属性来指定标签文本和值，默认为label和value

<avue-form :option="option"></avue-form>
<script>
export default {
  data(){
    return {
       option:{
          column: [{
            label: '开关',
            prop: 'switch',
            type: 'switch',
            props:{
              label:'name',
              value:'code'
            },
            dicData:[{
              name:'关',
              code:0
            },{
              name:'开',
              code:1
            }]
          }]
       }
    }
  }
}
</script>

Expand Copy Copy

网络字典

更多用法参考表单数据字典

配置dicUrl指定后台接口的地址，默认只会取前2项

<avue-form :option="option"></avue-form>
<script>
export default {
  data(){
    return {
       option:{
          column: [{
            label: '开关',
            prop: 'switch',
            type: 'switch',
            props:{
              label:'name',
              value:'code'
            },
            props: {
              label: 'name',
              value: 'code'
            },
            dicUrl: 'https://cli.avuejs.com/api/area/getProvince'
          }]
       }
    }
  }
}
</script>

Expand Copy Copy

按钮颜色

使用activeColor属性与inactiveColor属性来设置开关的文字描述。

<avue-form :option="option"></avue-form>
<script>
export default {
  data(){
    return {
       option:{
          column: [{
            label: '开关',
            prop: 'switch',
            type: 'switch',
            activeColor:"#13ce66",
            inactiveColor:"#ff4949",
            dicData:[{
              label:'关',
              value:0
            },{
              label:'开',
              value:1
            }]
          }]
       }
    }
  }
}
</script>

Expand Copy Copy