avue-crud 组件，form中实现树形下拉框联动输入框数据，省市区字典联动-Toy模板网

这篇具有很好参考价值的文章主要介绍了avue-crud 组件，form中实现树形下拉框联动输入框数据，省市区字典联动。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1、需要实现的功能是，当我选择一条数据的时候，后面几个输入框会自动带入

使用的是avue-crud组件

参数配置：

<avue-crud ref="crud" :data="data" v-mode='form' :option="option" ></avue-crud>

{
label:'下拉框',
prop:'prop',
type:'tree',
dicUrl:'xxx/xxx', // 使用前提是这个接口中存在需要配置的这三个参数
// 示例数据:[{prop:'111',liandong1:'111',liandong2:'2222'},{prop:'222',liandong1:'333',liandong2:'444'}]
props:{
	label:'name',
	value:'code',
},
slot:true,
nodeClick:(data)=>{
// 节点点击的时候会获取到数据
	this.form.liandong1 = data.liandong1
	this.form.liandong2 = data.liandong2
}
},
{
	label:'联动1',
	prop:'liandong1'
},
{
	label:'联动2',
	prop:'liandong2'
}

2、省市区字典联动

官网示例：https://avuejs.com/crud/crud-dic/#%E5%AD%97%E5%85%B8%E8%81%94%E5%8A%A8

注意点：2.9.0+ 用cascader，以下用cascaderItem

联动只支持dicUrl远程字典文章来源地址https://www.toymoban.com/news/detail-616595.html

<avue-crud ref="crud" :data="data" :option="option" ></avue-crud>

<script>
let baseUrl = 'https://cli.avuejs.com/api/area'
export default {
    data() {
      return {
        data: [
          {
            name:'张三',
            sex:'男',
            province: '110000',
            city: '110100',
            area: '110101',
          }, {
            name:'李四',
            sex:'女',
            province: '130000',
            city: '130200',
            area: '130202',
          }
        ],
        option:{
          column:[
             {
              label:'姓名',
              prop:'name',
            }, {
              label:'性别',
              prop:'sex'
            },{
              label:'省份',
              prop:'province',
              type:'select',
              cascader: ['city'],
              cascaderIndex:1,
              props: {
                  label: 'name',
                  value: 'code'
              },
              dicUrl:`${baseUrl}/getProvince`
            },
            {
              width: 120,
              label: '城市',
              prop: 'city',
              type: 'select',
              cascader: ['area'],
              cascaderIndex:1,
              cell: true,
              props: {
                label: 'name',
                value: 'code'
              },
              dicUrl: `${baseUrl}/getCity/{{key}}`,
              rules: [
                {
                  required: true,
                  message: '请选择城市',
                  trigger: 'blur'
                }
              ]
            },
            {
              width: 120,
              label: '地区',
              prop: 'area',
              cell: true,
              props: {
                label: 'name',
                value: 'code'
              },
              type: 'select',
              dicUrl: `${baseUrl}/getArea/{{key}}`,
              rules: [
                {
                  required: true,
                  message: '请选择地区',
                  trigger: 'blur'
                }
              ]
            }
          ]
        }
      }
    },
    mounted(){
      //放在数据加载完后执行
      this.$refs.crud.dicInit('cascader');
    }
}
</script>