element-ui中多级联动的用法（select、cascater、tree）

一、三个以内，两个时（el-select）

<template>
=============同个两个@change实现父子孙的三级联动==================
  <el-form :inline="true">
    <el-form-item label="下拉1">
      <el-select
        v-model="selectData.com1"
        placeholder="请选择1"
        clearable
        @change="change1"
      >
        <el-option
          v-for="x in optionData.father"
          :key="x.value"
          :value="x.value"
          :label="x.name"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="下拉2">
      <el-select
        v-model="selectData.com2"
        placeholder="请选择2"
        clearable
        @change="change2"
      >
        <el-option
          v-for="x in optionData.son[selectData.com1]"
          :key="x.value"
          :value="x.value"
          :label="x.name"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="下拉3">
      <el-select v-model="selectData.com3" placeholder="请选择3" clearable>
        <el-option
          v-for="x in optionData.sun[selectData.com2]"
          :key="x.value"
          :value="x.value"
          :label="x.name"
        ></el-option>
      </el-select>
    </el-form-item>

==========这里是@change的回调测试===========
<el-form-item>
    <el-select @change="selectChanged" v-model="devType" size=small><el-option v-for="item in devTypes" :key="item" :label="item" :value="item"></el-option>    
    </el-select>
</el-form-item>



  </el-form>
</template>

<script>
  import tree from '@/data/regionData.json'
export default {
  data() {
    return {
        tree: tree,
        devType: '',
        devTypes: ['a', 'b', 'c'],
        selectData: {
        com1: '',
        com2: '',
        com3: ''
      },
      optionData: {
        father: [
          { value: 'A', name: '控件1A' },
          { value: 'B', name: '控件1B' },
          { value: 'C', name: '控件1C' }
        ],
        son: {
          A: [
            { value: 'A1', name: '控件2A1' },
            { value: 'A2', name: '控件2A2' },
            { value: 'A3', name: '控件2A3' }
          ],
          B: [
            { value: 'B1', name: '控件2B1' },
            { value: 'B2', name: '控件2B2' }
          ],
          C: [
            { value: 'C1', name: '控件2C1' },
            { value: 'C2', name: '控件2C2' }
          ]
        },
        sun: {
          A1: [
            { value: 'A11', name: '控件3A11' },
            { value: 'A12', name: '控件3A12' }
          ],
          A2: [
            { value: 'A21', name: '控件3A21' },
            { value: 'A22', name: '控件3A22' }
          ],
          A3: [
            { value: 'A31', name: '控件3A31' },
            { value: 'A32', name: '控件3A32' },
            { value: 'A33', name: '控件3A33' }
          ],
          B1: [
            { value: 'B11', name: '控件3B11' },
            { value: 'B12', name: '控件3B12' }
          ],
          B2: [{ value: 'B21', name: '控件3B21' }],
          C1: [{ value: 'C11', name: '控件3C11' }],
          C2: [
            { value: 'C21', name: '控件3C21' },
            { value: 'C22', name: '控件3C22' },
            { value: 'C23', name: '控件3C23' }
          ]
        }
      }
    };
  },
  methods: {
    change1: function (val) {
      if (val) {
          console.log(val)
          console.log(this.optionData.son[val][0].value)
        this.selectData.com2 = this.optionData.son[val][0].value; // 根据第一个控件所选项确定第二个控件下拉内容的对象数组，并使默认为第一个数组项
        this.change2(); // 控件2手动改变时会自动触发该方法，但是被动改变时不会触发，所以手动加上去
      } else {
        this.selectData.com2 = ''; // 若前一个控件清空则后一个控件所选内容也清空
        this.change2();
      }
    },
    change2: function () {
      const val = this.selectData.com2;
      if (val) {
        this.selectData.com3 = this.optionData.sun[val][0].value;
      } else {
        this.selectData.com3 = '';
      }
    },
    selectChanged(value) {
        console.log(value)
        console.log(this.tree[0])
    }
  }
};
</script>

<style>
</style>

四玺丸子炸鸡块====vue+elementui–el-select控件实现三级联动

cascater级联

具体js在上面

=======数据例子=======
[
  {
    "id": "zhinan",
    "parentId": null,
    "label": "指南",
    "value": "zhinan"
  },
  {
    "id": "shejiyuanze",
    "parentId": "zhinan",
    "label": "设计原则",
    "value": "shejiyuanze"
  },

==============这里是cascater级联的用法，重点在内部绑定数据显示的是label项=================
<el-form>
<el-form-item>
    <el-cascader
          :options="tree"
          :props="{ checkStrictly: true }"
          clearable></el-cascader>
</el-form-item>
</el-form>

三、很多级的时候，直接使用树形空间el-tree（选项可以选择，具体看属性定）

<template>
  <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
</template>

<script>
  export default {
    data() {
      return {
        data: [{
          label: '一级 1',
          children: [{
            label: '二级 1-1',
            children: [{
              label: '三级 1-1-1'
            }]
          }]
        }, {
          label: '一级 2',
          children: [{
            label: '二级 2-1',
            children: [{
              label: '三级 2-1-1'
            }]
          }, {
            label: '二级 2-2',
            children: [{
              label: '三级 2-2-1'
            }]
          }]
        }, {
          label: '一级 3',
          children: [{
            label: '二级 3-1',
            children: [{
              label: '三级 3-1-1'
            }]
          }, {
            label: '二级 3-2',
            children: [{
              label: '三级 3-2-1'
            }]
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    },
    methods: {
      handleNodeClick(data) {
        console.log(data);
      }
    }
  };
</script>