1、需要實(shí)現(xiàn)的功能是，當(dāng)我選擇一條數(shù)據(jù)的時(shí)候，后面幾個(gè)輸入框會(huì)自動(dòng)帶入

使用的是avue-crud組件

參數(shù)配置：

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

{
label:'下拉框',
prop:'prop',
type:'tree',
dicUrl:'xxx/xxx', // 使用前提是這個(gè)接口中存在需要配置的這三個(gè)參數(shù)
// 示例數(shù)據(jù):[{prop:'111',liandong1:'111',liandong2:'2222'},{prop:'222',liandong1:'333',liandong2:'444'}]
props:{
	label:'name',
	value:'code',
},
slot:true,
nodeClick:(data)=>{
// 節(jié)點(diǎn)點(diǎn)擊的時(shí)候會(huì)獲取到數(shù)據(jù)
	this.form.liandong1 = data.liandong1
	this.form.liandong2 = data.liandong2
}
},
{
	label:'聯(lián)動(dòng)1',
	prop:'liandong1'
},
{
	label:'聯(lián)動(dòng)2',
	prop:'liandong2'
}

2、省市區(qū)字典聯(lián)動(dòng)

官網(wǎng)示例：https://avuejs.com/crud/crud-dic/#%E5%AD%97%E5%85%B8%E8%81%94%E5%8A%A8

注意點(diǎn)：2.9.0+ 用cascader，以下用cascaderItem

聯(lián)動(dòng)只支持dicUrl遠(yuǎn)程字典文章來源地址http://www.zghlxwxcb.cn/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: '請(qǐng)選擇城市',
                  trigger: 'blur'
                }
              ]
            },
            {
              width: 120,
              label: '地區(qū)',
              prop: 'area',
              cell: true,
              props: {
                label: 'name',
                value: 'code'
              },
              type: 'select',
              dicUrl: `${baseUrl}/getArea/{{key}}`,
              rules: [
                {
                  required: true,
                  message: '請(qǐng)選擇地區(qū)',
                  trigger: 'blur'
                }
              ]
            }
          ]
        }
      }
    },
    mounted(){
      //放在數(shù)據(jù)加載完后執(zhí)行
      this.$refs.crud.dicInit('cascader');
    }
}
</script>

到了這里，關(guān)于avue-crud 組件，form中實(shí)現(xiàn)樹形下拉框聯(lián)動(dòng)輸入框數(shù)據(jù)，省市區(qū)字典聯(lián)動(dòng)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！