Avue自定义下拉框的内容

配置typeslot卡槽开启即可自定义下拉框的内容,typeformat配置回显的内容,但是你提交的值还是value并不会改变。

实现代码： 

<avue-form :option="option" v-model="form">
  <template slot="provinceType" slot-scope="{item,value,label}">
     <span>{
   
   { item }}</span>
  </template>
</avue-form>
<script>
export default {
    data() {
      return {
        form: {
          province:'120000'
        },
        option: {
          column: [
            {
              label: '单选',
              prop: 'province',
              type: 'select',
              props: {
                label: 'name',
                value: 'code'
              },
              typeslot: true,
              dicUrl: 'https://cli.avuejs.com/api/area/getProvince',
              typeformat(item, label, value) {
                return `值:${item[label]}-名:${item[value]}`
              },
              rules: [{
                  required: true,
                  message: '请选择省份',
                  trigger: 'blur'
                }]
             }]
          }
      }
    }
}
</script>

运行效果：