vue2結合element-ui實現(xiàn)TreeSelect樹選擇功能

更新時間：2024年03月12日 16:06:23 作者：小白小白從不日別

這篇文章主要為大家詳細介紹了vue2如何結合element-ui實現(xiàn)TreeSelect樹選擇功能,文中的示例代碼講解詳細,感興趣的小伙伴可以了解下

效果

大致思路

el-select和el-tree進行嵌套，將el-tree放到el-option里，循環(huán)遍歷el-option，同時定義一個方法比如：formatData，對樹形數(shù)據(jù)進行遞歸處理，這樣就可以實現(xiàn)無論嵌套的層級有幾層都可以正常渲染在界面上利用 v-model 和 update:selectValue 實現(xiàn)父子組件之間的雙向通信，同時利用computed進行監(jiān)聽

vue代碼

子組件：TreeSelect.vue

<template>
  <div class="app-container" style="padding: 0">
    <el-select
      class="main-select-tree"
      ref="selectTree"
      v-model="value"
      style="width: 240px"
      clearable
      @clear="clearSelectInput"
    >
      <el-input
        style="width: 220px; margin-left: 10px; margin-bottom: 10px"
        placeholder="輸入關鍵字進行過濾"
        v-model="filterText"
        clearable
      >
      </el-input>
      <el-option
        v-for="item in formatData(data)"
        :key="item.value"
        :label="item.label"
        :value="item.value"
        style="display: none"
      />
      <el-tree
        class="main-select-el-tree"
        ref="selecteltree"
        :data="data"
        node-key="id"
        highlight-current
        :props="defaultProps"
        @node-click="handleNodeClick"
        :current-node-key="value"
        :expand-on-click-node="true"
        default-expand-all
        :filter-node-method="filterNode"
      />
    </el-select>
  </div>
</template>
    
    <script>
export default {
  props: {
    selectValue: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      filterText: "",
      value: "",
      data: [
        {
          id: 1,
          label: "云南",
          children: [
            {
              id: 2,
              label: "昆明",
              children: [
                {
                  id: 3,
                  label: "五華區(qū)",
                  children: [
                    {
                      id: 8,
                      label: "xx街道",
                      children: [
                        {
                          id: 81,
                          label: "yy社區(qū)",
                          children: [{ id: 82, label: "北辰小區(qū)" }],
                        },
                      ],
                    },
                  ],
                },
                { id: 4, label: "盤龍區(qū)" },
              ],
            },
          ],
        },
        {
          id: 5,
          label: "湖南",
          children: [
            { id: 6, label: "長沙" },
            { id: 7, label: "永州" },
          ],
        },
        {
          id: 12,
          label: "重慶",
          children: [
            { id: 10, label: "渝北" },
            { id: 9, label: "合川" },
          ],
        },
        {
          id: 13,
          label: "江蘇",
          children: [{ id: 14, label: "鹽城" }],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  watch: {
    filterText(val) {
      this.$refs.selecteltree.filter(val);
    },
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 遞歸遍歷數(shù)據(jù)
    formatData(data) {
      let options = [];
      const formatDataRecursive = (data) => {
        data.forEach((item) => {
          options.push({ label: item.label, value: item.id });
          if (item.children && item.children.length > 0) {
            formatDataRecursive(item.children);
          }
        });
      };
      formatDataRecursive(data);
      return options;
    },
    // 點擊事件
    handleNodeClick(node) {
      this.value = node.id;
      this.$refs.selectTree.blur();
      this.$emit('update:selectValue', node.label);
    },
    // 清空事件
    clearSelectInput() {
        this.$emit('update:selectValue', '');
        // 獲取 el-tree 實例的引用
        const elTree = this.$refs.selecteltree;
       // 將當前選中的節(jié)點設置為 null
       elTree.setCurrentKey(null);
    },
  },
};
</script>
    <style>
.main-select-el-tree .el-tree-node .is-current > .el-tree-node__content {
  font-weight: bold;
  color: #409eff;
}
.main-select-el-tree .el-tree-node.is-current > .el-tree-node__content {
  font-weight: bold;
  color: #409eff;
}
</style>

父組件：

<TreeSelect v-model="selectedValue" @update:selectValue="handleSelectValueChange"></TreeSelect>

<el-button size="medium" :disabled="todoIsTotal">交接當前{{ tableData.length }}條任務</el-button>
                
import TreeSelect from "./TreeSelect.vue";

export default {
    components: {
        TreeSelect,
    },
    data() {
        selectedValue: "",
    },
    computed: {
        todoIsTotal() {
            return this.selectedValue === "";
        },
    },
    methods: {
        handleSelectValueChange(value) {
            if (value && value.length > 0) {
                this.selectedValue = value;
            } else {
                this.selectedValue = "";
            }
        },
    },
}

到此這篇關于vue2結合element-ui實現(xiàn)TreeSelect樹選擇功能的文章就介紹到這了,更多相關vue2 element-ui實現(xiàn)TreeSelect樹選擇內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: