选择框自定义

可以自定义下拉框的显示格式和回显的格式

TIP

1.0.8+

普通用法

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

<avue-form :option="option" v-model="form" @submit="handleSubmit">
   <template slot="provinceType" slot-scope="{item,value,label}">
      <span></span>
  </template>
</avue-form>
<script>
const baseUrl = 'https://cli2.avue.top/api/area'
export default {
    data() {
      return {
        form: {},
        option: {
          column: [
            {
              label: '省份',
              prop: 'province',
              type: 'select',
              props: {
                label: 'name',
                value: 'code'
              },
              typeslot: true,
              dicUrl: `${baseUrl}/getProvince`,
              tpyeformat(item, label, value) {
                return `值:${item[label]}-名:${item[value]}`
              },
              rules: [
                {
                  required: true,
                  message: '请选择省份',
                  trigger: 'blur'
                }
              ]
            }
          ]
        }
      }
    },
  methods:{
    handleSubmit(form){
       this.$message.success(JSON.stringify(this.form))
    }
  }
}
</script>

Attributes

Scoped Slot