selectTree单选iview+vue

 <Select

              ref="entitySelect"

              v-model="form.id"

              clearable

              placeholder="请选择"

              style="width: 200px"

            >

              <Option

                v-for="item of entityList"

                :value="item.id"

                :key="item.id"

                style="display: none"

                >{{ item.name }}

              </Option>

              <Tree

                :data="entityTreeData"

                ref="entityTree"

                @on-select-change="entityTreeSelected"

                style="padding: 0 0 0 10px"

              ></Tree>

            </Select>

entityTreeData: [], //原料类型Tree数据

entityList:[],//原料类型select数据

// 主体下拉树选中事件

    entityTreeSelected(data) {

      console.log(data);

      data.forEach((element) => {

        let obj = {

          id: element.value,

          name: element.name,

        }

        this.entityList.push(obj)

        this.$set(this.form,'id',element.id)

      });

      // 选中后下拉框收回

      this.$refs.entitySelect.toggleMenu();

      //回调标准营养库列表数据接口

      this.getStandardMaterialQueryApi();

    },

 

首先引用iview，因为要用到iview的tree和select
TreeSellect其实就是将iview的tree和select进行结合，将tree选中的值传递给select
tree的on-check-change事件中将选中的树节点的key和title作为一个新数组付给select的options绑定的数组，将key付给select绑定的值。这样就完成了从tree到select的数据绑定
tree的getCheckedNodes方法可以获得选中的节点的数组，将该数组中的节点删除将直接影响tree的选中情况
原文链接：https://blog.youkuaiyun.com/qq_43423320/article/details/122205171