vue下拉el-select三级联动（公司-部门-人员）

vue下拉el-select三级联动

举个例子：公司-部门-人员

vue页面中：

  <el-select v-model="companyid" placeholder="请选择公司" @change="changeset">
      <el-option
        v-for="item in companylist"
        :key="item.value"
        :label="item.name"
        :value="item.id"
      >
      el-option>
    el-select>
    <el-select
      v-model="departmentid"
      placeholder="请选择部门"
      :disabled="disabled"
      @change="changesetper"
    >
      <el-option
        v-for="item in departmentlist"
        :key="item.value"
        :label="item.name"
        :value="item.id"
      >
      el-option>
    el-select>
    <el-select
      v-model="personid"
      placeholder="请选择人员"
      :disabled="disabled1"
    >
      <el-option
        v-for="item in personlist"
        :key="item.value"
        :label="item.name"
        :value="item.id"
      >
      el-option>
    el-select>

data() {
    return {
      //公司
      companyid: null,
      companylist: [],
      //部门
      departmentid: null,
      departmentlist: [],
      //部门禁用
      disabled: true,
      //人员
      personid: null,
      personlist: [],
      //人员禁用
      disabled1: true,
    };
  },

  mounted() {
      //获取公司数据
     this.getcompanylist();
  },

  methods: {
   //模拟公司数据
    getcompanylist() {
      let data = [
        {
          id: 1,
          name: "江西",
        },
        {
          id: 2,
          name: "湖南",
        },
      ];
      this.companylist = data;
    },
    changeset() {
      //当切换选择公司时需要清空部门、人员
      this.departmentlist = [];
      this.personid = null;
      this.personlist = [];
      // 模拟部门数据
      let data = [
        {
          id: 1,              //部门Id
          name: "江西研发部1",
          companyid: 1,       //公司id
        },
        {
          id: 2,
          name: "江西市场部1",
          companyid: 1,
        },

        {
          id: 3,
          name: "湖南研发部2",
          companyid: 2,
        },

        {
          id: 4,
          name: "湖南市场部2",
          companyid: 2,
        },
      ];
      if (!!this.companyid) {
        //当公司ID不为空
        this.departmentid = [];
        this.disabled = false;
        //遍历部门下拉框数据
        data.forEach((e) => {
          if (e.companyid == this.companyid) {
            this.departmentlist.push(e);
          }
        });
        //设置默认选中第一个部门
        if (this.departmentlist.length > 0) {
          this.personlist = [];
          this.departmentid = this.departmentlist[0].id;
          //获取人员下拉框数据
          let data = [
            { id: 1, name: "江西研发部小张1", departmentid: 1 }, //id:人员id      																	   //departmentid:部门id
            { id: 2, name: "江西研发部小李1", departmentid: 1 },
            { id: 3, name: "江西市场部小王2", departmentid: 2 },
            { id: 4, name: "江西市场部小蒋2", departmentid: 2 },
            { id: 5, name: "湖南研发部小陆3", departmentid: 3 },
            { id: 6, name: "湖南研发部小夏3", departmentid: 3 },
            { id: 7, name: "小王4", departmentid: 4 },
            { id: 8, name: "小蒋4", departmentid: 4 },
          ];
		  //遍历data里面的数据
          data.forEach((e) => {
            if (e.departmentid == this.departmentid) {
              //符合条件的push进人员
              this.personlist.push(e);
            }
          });
          this.disabled1 = false;
        }
      } else {
        //选中的部门为空，则清空人员列表  部门列表
        this.departmentlist = [];
        this.disabled = true;
        this.disabled1 = true;
        this.personlist = [];
      }
    },
	//切换部门
    changesetper() {
      this.personlist = [];
      this.personid = null;
      if (!!this.departmentid) {
        this.disabled1 = false;
        //部门下拉框选中获取人员数据
        let data = [
          { id: 1, name: "江西研发部小张1", departmentid: 1 }, //id:人员id      																		 //departmentid:部门id
          { id: 2, name: "江西研发部小李1", departmentid: 1 },
          { id: 3, name: "江西市场部小王2", departmentid: 2 },
          { id: 4, name: "江西市场部小蒋2", departmentid: 2 },
          { id: 5, name: "湖南研发部小陆3", departmentid: 3 },
          { id: 6, name: "湖南研发部小夏3", departmentid: 3 },
          { id: 7, name: "小王4", departmentid: 4 },
          { id: 8, name: "小蒋4", departmentid: 4 },
        ];

        data.forEach((e) => {
          if (e.departmentid == this.departmentid) {
            this.personlist.push(e);
          }
        });
        //设置人员默认选中
        if (this.personlist.length > 0) {
          this.personid = this.personlist[0].id;
        }
      } else {
        //部门下拉框为空  ，清空数据
        this.departmentlist = [];
        this.disabled1 = true;
      }
    },
  },