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,  //公司id
      companylist: [],  //公司list
      
      departmentid: null,  //部门id
      departmentlist: [],  //部门lsit
      disabled: true,  //部门禁用
      
      personid: null,  //人员id
      personlist: [],  //人员list
      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;
      }
    },
  },