Avue 表单字段 动态下拉处理 及联动下拉处理

Avue 表单字段 动态下拉处理及联动下拉处理

export const tableOption = {
  border: true,
  index: true,
  selection: true,
  indexLabel: '序号',
  stripe: true,
  menuAlign: 'center',
  align: 'center',
  dialogClickModal: false,
  searchMenuSpan: 6,
  labelWidth: 100,
  column: [{
    type: 'input',
    label: 'id',
    prop: 'id',
    hide: true,
    editDisabled: true,
    editDisplay: false,
    addDisplay: false
  }, 
  {
  // 一级下拉
    type: 'select',     // 字段类型
    label: '适用省份',   // label 名称
    prop: 'ssProvince',  // 与后台交互的 属性名
    cascaderItem: ['ssCity'],   // 用于 二级下拉框 的key值
    dicUrl: '/stl/stlregion/parentCode/100000',  // 动态字典 接口
    props: {   // 字典接口返回对象格式  {name:"",code:""}  
      label: 'name',
      value: 'code'
    },
    rules: [{   // 必填校验
      required: true,
      message: '请选择省份',
      trigger: 'change'
    }],
    search: true
  }, {
  // 二级下拉
    type: 'select',     // 字段类型
    label: '适用地市',    // label 名称
    prop: 'ssCity',    // 与后台交互的 属性名
    props: {    // 字典接口返回对象格式  {name:"",code:""}  
      label: 'name',
      value: 'code'
    },
    rules: [{
      required: true,
      message: '请选择市区',
      trigger: 'change'
    }],
    dicUrl: '/stl/stlregion/parentCode/{{key}}', // 动态字典接口 其中 {{key}}  为一级下拉框 的动态下拉值(value值)
    search: true
  }
  ]
}