封装＜SelectTree＞下拉树组件

最新推荐文章于 2024-07-23 17:35:39 发布
最新推荐文章于 2024-07-23 17:35:39 发布
阅读量256 收藏
点赞数
文章标签： servlet html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_67898309/article/details/130006291
版权
文章展示了一个Vue组件SelectTree的实现，该组件结合了el-select和el-tree，用于实现树形数据的选择。组件支持单选和多选，具有过滤、禁用、大小调整等功能，并提供了节点点击和选择的事件处理。在父组件中，SelectTree被用作表格列的模板，用于显示和编辑指标名称。
摘要由CSDN通过智能技术生成

使用效果图：

SelectTree组件 

<template>
  <el-select
    :title="multiple ? optionData.label : ''"
    ref="select"
    :value="value"
    placeholder="请选择"
    :size="size"
    :clearable="clearable"
    :disabled="disabled"
    :filterable="filterable"
    :filter-method="filterMethod"
    style="width: 100%;"
    @clear="clear"
    @visible-change="visibleChange"
  >
    <el-option
      ref="option"
      hidden
      class="tree-select__option"
      :value="optionData.id"
      :label="optionData.label"
    >
    </el-option>
    <el-tree
      ref="tree"
      class="tree-select__tree"
      :class="`tree-select__tree--${multiple ? 'checked' : 'radio'}`"
      :node-key="nodeKey"
      :data="data"
      :props="props"
      :default-expanded-keys="[value]"
      :show-checkbox="multiple"
      :highlight-current="!multiple"
      :expand-on-click-node="multiple"
      :default-expand-all="expand"
      :filter-node-method="filterNode"
      @node-click="handleNodeClick"
      @check-change="handleCheckChange"
    ></el-tree>
  </el-select>
</template>

<script>
export default {
  name: "TreeSelect",
  props: {
    size: {
      type: String,
      default: "small"
    },
    // v-model绑定
    value: {
      type: [String, Number],
      default: ""
    },
    multiple: {
      type: Boolean,
      default: false
    },
    clearable: {
      type: Boolean,
      default: false
    },
    // 树形的数据
    data: {
      type: Array,
      default: function() {
        return [];
      }
    },
    // 每个树节点用来作为唯一标识的属性
    nodeKey: {
      type: [String, Number],
      default: "id"
    },
    filterable: {
      type: Boolean,
      default: false
    },
    expand: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    // tree的props配置
    props: {
      type: Object,
      default: function() {
        return {
          label: "label",
          children: "children"
        };
      }
    },
    // 父节点是否可选
    parentSelectable: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      optionData: {
        id: "",
        label: ""
      },
      filterFlag: false
    };
  },
  watch: {
    value: {
      handler(val) {
        if (!this.isEmpty(this.data)) {
          this.init(val);
        }
      },
      immediate: true
    },
    data: function(val) {
      if (!this.isEmpty(val)) {
        this.init(this.value);
      }
    }
  },
  created() {},
  methods: {
    // 是否为空
    isEmpty(val) {
      for (let key in val) {
        return false;
      }
      return true;
    },
    handleNodeClick(data, node) {
      if (this.multiple) {
        return;
      }
      if (!this.parentSelectable) {
        this.$refs.tree.setCurrentKey(data.id);
        if (data.children && data.children.length) {
          return;
        }
      }
      this.$emit("input", data[this.nodeKey]);
      this.$emit("select", data, node);
      this.$refs.select.visible = false;
    },
    handleCheckChange() {
      const nodes = this.$refs.tree.getCheckedNodes();
      const value = nodes.map(item => item[this.nodeKey]).join(",");
      this.$emit("input", value);
    },
    init(val) {
      // 多选
      if (this.multiple) {
        const arr = val.toString().split(",");
        this.$nextTick(() => {
          this.$refs.tree.setCheckedKeys(arr);
          const nodes = this.$refs.tree.getCheckedNodes();
          this.optionData.id = val;
          this.optionData.label = nodes
            .map(item => item[this.props.label])
            .join(",");
        });
      }
      // 单选
      else {
        val = val === "" ? null : val;
        this.$nextTick(() => {
          this.$refs.tree.setCurrentKey(val);
          if (val === null) {
            return;
          }
          const label = this.props.label || "label";
          const node = this.$refs.tree.getNode(val);
          this.optionData.id = val;
          this.optionData[label] = node.label;
        });
      }
    },
    visibleChange(e) {
      if (e) {
        const tree = this.$refs.tree;
        this.filterFlag && tree.filter("");
        this.filterFlag = false;
        let selectDom = null;
        if (this.multiple) {
          selectDom = tree.$el.querySelector(".el-tree-node.is-checked");
        } else {
          selectDom = tree.$el.querySelector(".is-current");
        }
        setTimeout(() => {
          this.$refs.select.scrollToOption({ $el: selectDom });
        }, 0);
      }
    },
    clear() {
      this.$emit("input", "");
    },
    filterMethod(val) {
      this.filterFlag = true;
      this.$refs.tree.filter(val);
    },
    filterNode(value, data) {
      if (!value) return true;
      const label = this.props.label || "name";
      return data[label].indexOf(value) !== -1;
    }
  }
};
</script>

<style lang="less">
.tree-select__option {
  &.el-select-dropdown__item {
    height: auto;
    line-height: 1;
    padding: 0;
  }
}

.tree-select__tree {
  font-weight: 400;
  &.tree-select__tree--radio {
    .el-tree-node.is-current > .el-tree-node__content {
      background-color: #1263dd !important;
      color: #fff !important;
      font-weight: bold;
    }
    .el-tree-node__content:hover {
      background-color: #0f428f;
      color: #fff;
    }
  }
}
</style>

父组件中引用：

//父组件中
<el-table ref="table" :data="tableData" border stripe height="100%">
              <el-table-column
                label="指标"
                prop="indicatorName"
                min-width="150"
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.indicatorName.length">{{
                    scope.row.indicatorName
                  }}</span>
                    //使用子组件
                  <SelectTree
                    v-else
                    size="mini"
                    :data="indicatorNameList"
                    expand
                    v-model="scope.row.indicatorName"
                    :parentSelectable="false"
                    filterable
                    @select="handleNameNodeClick(scope.$index, ...arguments)"
                  />
                </template>
              </el-table-column>
</el-table>

//引用和注册子组件
import SelectTree from "./components/SelectTreeNew";//路径写在哪就在哪引用
export default {
  components: { SelectTree },

//在data中声明要用的参数
data(){
    return{
        tableData:[],
        indicatorNameList:[],//下拉树的数据
    }
  }
}

//methods中处理下拉树的点击事件
methods：{
     handleNameNodeClick(index, data, node) {
         //点击与树节点相关数据都在index data node,按照需求获取即可
    },
       //获取下拉树的数据，给indicatorNamrList赋值
     getIndicatorNameList() {
      setTimeout(() => {
        //假数据 实际接口获取
        let indicatorTree = [
          {
            id: "baseInfo",
            label: "基本信息",
            parentId: null,
            leaf: false,
            checked: false,
            address: null,
            children: [
              {
                id: "code",
                label: "基本信息响应码",
                parentId: null,
                leaf: true,
                checked: false,
                address: null,
                children: null,
                alarmCount: 0,
                hasSerious: false,
                hasWarn: false,
                hasCommonly: false,
                hasRemind: false
              },
              {
                id: "collefctTime",
                label: "基本信息时间",
                parentId: null,
                leaf: true,
                checked: false,
                address: null,
                children: null,
                alarmCount: 0,
                hasSerious: false,
                hasWarn: false,
                hasCommonly: false,
                hasRemind: false
              },
              {
                id: "gldrervw",
                label: "管理单位",
                parentId: null,
                leaf: true,
                checked: false,
                address: null,
                children: null,
                alarmCount: 0,
                hasSerious: false,
                hasWarn: false,
                hasCommonly: false,
                hasRemind: false
              },
              {
                id: "intSet",
                label: "智能能力集",
                parentId: null,
                leaf: true,
                checked: false,
                address: null,
                children: null,
                alarmCount: 0,
                hasSerious: false,
                hasWarn: false,
                hasCommonly: false,
                hasRemind: false
              },
              {
                id: "Classification",
                label: "设施分类",
                parentId: null,
                leaf: true,
                checked: false,
                address: null,
                children: null,
                alarmCount: 0,
                hasSerious: false,
                hasWarn: false,
                hasCommonly: false,
                hasRemind: false
              },
              {
                id: "type",
                label: "功能类型",
                parentId: null,
                leaf: true,
                checked: false,
                address: null,
                children: null,
                alarmCount: 0,
                hasSerious: false,
                hasWarn: false,
                hasCommonly: false,
                hasRemind: false
              },
              {
                id: "installTime",
                label: "安装时间",
                parentId: null,
                leaf: true,
                checked: false,
                address: null,
                children: null,
                alarmCount: 0,
                hasSerious: false,
                hasWarn: false,
                hasCommonly: false,
                hasRemind: false
              },
              {
                id: "exTime",
                label: "到期时间",
                parentId: null,
                leaf: true,
                checked: false,
                address: null,
                children: null,
                alarmCount: 0,
                hasSerious: false,
                hasWarn: false,
                hasCommonly: false,
                hasRemind: false
              },
              {
                id: "fdsgh",
                label: "摄像机采集区域",
                parentId: null,
                leaf: true,
                checked: false,
                address: null,
                children: null,
                alarmCount: 0,
                hasSerious: false,
                hasWarn: false,
                hasCommonly: false,
                hasRemind: false
              }
            ]
          }
        ];
        //将获取的数据进行转换
        this.indicatorNameList = JSON.parse(JSON.stringify(indicatorTree));
        this.indicatorNameList.forEach(item => {
          item.selectable = false;
        });
     
      }, 100);
    },
}

只差亿点点
关注
vue2 - 详细介绍element UI中在el-select嵌套el-tree树形控件实现下拉选择树型结构数据的效果实例（组件封装）
前端充电宝
03-03 1095
element UI中在el-select嵌套el-tree树形控件实现下拉选择树型结构数据的效果实例
layui扩展组件之树形下拉多选组件
12-19
总结，layui treeselect组件是layui框架中一个强大的工具，通过将zTree的功能集成到layui中，使得开发者能够更加便捷地在前端实现树形结构的下拉多选功能，提高了用户体验和开发效率。正确理解和使用这个组件，能够...
el-select+el-tree实现树形分组+多选+搜索的选择器
weixin_60886885的博客
05-31 3599
【代码】el-select+el-tree实现树形分组+多选+搜索的选择器。
select tree 简单实用-下拉树
03-24
NULL 博文链接：https://heroxuan.iteye.com/blog/1033362
基于Element UI内置的Select下拉和Tree树形组件，组合封装的树状下拉选择器
最新发布
WindfallSheng的博客
07-23 2530
基于Element UI内置的Select下拉和Tree树形组件，组合封装的树状下拉选择器
selectTree树形控件
weixin_53959733的博客
12-15 662
包括复选框，单选，多选，模糊查询。
封装 element-ui下拉选择树组件
zhongmei121的专栏
07-22 1158
父组件调用 下拉选择树组件<select-tree>： html: <select-tree :data="deepClone(selectTreeData)" :selectId="formData.parentId" @getParent="getParent" /> js: filterDisable(data,id){// 过滤掉不能选择的树节点 ...
初次接触SelectTree组件
m0_46114541的博客
05-25 529
原本项目中使用element-ui来完成，但发现el-cascader无法完美的实现预想中的效果。所以选择到了SelectTree组件。需求：1、下拉列表需要加载树目录；2、数据较大需要以懒加载；3、二次修改时需要通过后端返回的id和name来展示
基于elementUI实现的selectTree，select组件下拉树形结构选择
qq_16785561的博客
07-09 476
【代码】基于elementUI实现的selectTree，select组件下拉树形结构选择。
selectTree 下拉树菜单控件
11-22
"SelectTree"是一种常见的前端UI组件，用于在网页中实现下拉式的树形结构选择功能。这个控件在很多业务场景中都非常实用，比如在层级数据较多时，它能帮助用户以折叠和展开的方式查看和选择数据，提高用户体验。下面...
基于element-ui封装可搜索的懒加载tree组件的实现
10-15
基于Element-UI封装可搜索的懒加载Tree组件的实现 在前端开发中，尤其是在管理后台系统里，Tree组件广泛用于展示层级化数据。随着互联网数据量的日益增长，传统的Tree组件已无法满足大数据量场景下的性能要求。于是...
基于ztree开发的下拉树控件ztree-select
05-10
基于最新版本ztree而开发的下拉树插件，还拥有搜索功能
selectTree tree控件 日历控件 tree控件 radio CheckBox demo
10-11
selectTree tree控件 日历控件 tree控件 radio CheckBox demo 直接可以用 案例多多
jsTreeSelect jquery 树形下拉菜单
07-22
用jsTree+div模拟 js树形下拉菜单
组合element里面的select和tree实现的treeSelect选择器
08-09
SelectTree是组合element里面的select和tree两者实现的，可以实现多选，单选，同时选中以后关闭下拉框等操作
element 封装选择下拉树 select-tree
qq_1872583947的博客
05-24 1560
业务需求中要求使用选择下拉树，也就是select和tree的组合 新建一个公共组件 在components下新建SelectTree文件夹->新建index.vue <template> <el-select :value="valueTitle" :clearable="clearable" @clear="clearHandle" :placeholder="placeholder" ref="select" > &l
elementUI实现selecttree自定义下拉框树形组件支持多选和搜索
.伊泽瑞尔
01-31 5181
elementUI实现selecttree自定义下拉框树形组件支持多选和搜索
Element-UI封装El-Select-Tree组件(树形下拉选择器)
Sunny_boy
05-17 1342
封装Select-Tree组件
Vue + elementUI 自定义select-tree下拉树组件
法号钦尘的博客
12-23 8251
vue下，elementUI并没有提供选树组件，于是借鉴了网上前端大佬的实现，加上自己在使用过程中发现的一些BUG，做了一些改进。主要可以支持动态表单的特性及v-model，支持禁用，支持放在表单中使用，下面请看代码。
vue3封装一个Select下拉选择器组件
09-25
好的，这是 Vue3 封装 Select 下拉选择器组件的一个示例： 首先，我们在组件中声明一个 prop 来接收选项数组，并设置一个 data 属性来保存当前选中的选项： ``` props: { options: { type: Array, default: () => [] } }, data() { return { selected: null } } ``` 然后，我们可以在组件的模板中使用一个下拉列表来呈现选项： ``` <template> <select v-model="selected"> <option v-for="option in options" :key="option.value" :value="option.value"> {{ option.label }} </option> </select> </template> ``` 最后，我们可以在组件的 methods 中定义一个方法来监听选中的选项的变化，并使用 $emit 触发一个自定义事件来通知父组件： ``` methods: { onChange() { this.$emit('change', this.selected) } } ``` 在组件的模板中，我们可以给下拉列表绑定 change 事件，并调用 onChange 方法： ``` <template> <select v-model="selected" @change="onChange"> ... </select> </template> ``` 父组件可以使用 v-on 指令来监听 change 事件，并在事件处理函数中处理选中的选项： ``` <template> <my-select v-on:change="handleChange" :options="options"></my-select> </template> <script> export default { data() { return { options: [ { value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }, { value: '3', label: 'Option 3' } ] } }, methods: { handle
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值