选择框自定义

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

普通用法

选择框自定义 - 图1

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

  1. <avue-form :option="option" v-model="form" @submit="handleSubmit">
  2. <template slot="provinceType" slot-scope="{item,value,label}">
  3. <span>{{ item }}</span>
  4. </template>
  5. </avue-form>
  6. <script>
  7. const baseUrl = 'https://cli2.avue.top/api/area'
  8. export default {
  9. data() {
  10. return {
  11. form: {},
  12. option: {
  13. column: [
  14. {
  15. label: '省份',
  16. prop: 'province',
  17. type: 'select',
  18. props: {
  19. label: 'name',
  20. value: 'code'
  21. },
  22. typesolt: true,
  23. dicUrl: `${baseUrl}/getProvince`,
  24. tpyeformat(item, label, value) {
  25. return `值:${item[label]}-名:${item[value]}`
  26. },
  27. rules: [
  28. {
  29. required: true,
  30. message: '请选择省份',
  31. trigger: 'blur'
  32. }
  33. ]
  34. }
  35. ]
  36. }
  37. }
  38. },
  39. methods:{
  40. handleSubmit(form){
  41. this.$message.success(JSON.stringify(this.form))
  42. }
  43. }
  44. }
  45. </script>

Attributes

参数说明类型可选值默认值
typesolt子组件自定义Booleantrue/falsefalse

Scoped Slot

name说明
列表单的名称+Type(nameType)表单自定义列的内容,参数为{item,label,value}