搜索关键字变红，树展开

element-ui提供的default-expand-al方法，可以使符合条件的id放在一个数组中，从而进行展开。如下，所示

使搜索关键字变红

 <template v-slot="scope">
          <span v-if="!inputValue">{{ scope.row.name }}</span>
          <span
            v-if="inputValue"
            v-html="
              scope.row.name.replace(
                new RegExp(inputValue, 'g'),
                `<font style='color:red'>${inputValue}</font>`
              )
            "
          />
</template>

完整代码

<template>
  <div>
    <el-input placeholder="输入关键字" v-model="inputValue"> </el-input>
    <button @click="searchEvent">搜索</button>
    <el-table
      ref="list"
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
      :expand-row-keys="defaultExpandedKeys"
      :tree-props="{ children: 'childrens', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="date" label="日期" sortable width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" sortable width="180">
        <template v-slot="scope">
          <span v-if="!inputValue">{{ scope.row.name }}</span>
          <span
            v-if="inputValue"
            v-html="
              scope.row.name.replace(
                new RegExp(inputValue, 'g'),
                `<font style='color:red'>${inputValue}</font>`
              )
            "
          />
        </template>
      </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      allNodes: [],
      inputValue: "",
      defaultExpandedKeys: [],

      tableData: [
        {
          id: 1,
          date: "2016-05-02",
          name: "小明1",
          address: "上海市普陀区金沙江路 1518 弄",
          childrens: [
            {
              id: 25,
              parentId: 1,
              name: "方法",
            },
            {
              id: 26,
              parentId: 1,
              name: "房间2",
            },
            {
              id: 27,
              parentId: 1,
              name: "房间23",
            },
          ],
        },
        {
          id: 2,
          date: "2016-05-04",
          name: "红花",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          id: 3,
          date: "2016-05-01",
          name: "飞虎",
          address: "上海市普陀区金沙江路 1519 弄",
          childrens: [
            {
              id: 31,
              parentId: 3,
              date: "2016-05-01",
              name: "啊啊",
              address: "上海市普陀区金沙江路 1519 弄",
            },
            {
              id: 32,
              parentId: 3,
              date: "2016-05-01",
              name: "阿纳",
              address: "上海市普陀区金沙江路 1519 弄",
              childrens: [
                {
                  id: 33,
                  parentId: 32,
                  date: "2016-05-01",
                  name: "解决",
                  address: "上海市普陀区金沙江路 1519 弄",
                },
                {
                  id: 34,
                  parentId: 32,
                  date: "2016-05-01",
                  name: "方法",
                  address: "上海市普陀区金沙江路 1519 弄",
                },
              ],
            },
          ],
        },
        {
          id: 4,
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  methods: {
    //根据子id查询所有父级id
    find(array, id) {
      let stack = [];
      let going = true;
      let walker = (array, id) => {
        array.forEach((item) => {
          if (!going) return;
          stack.push(item["id"] + "");
          if (item["id"] === id) {
            going = false;
          } else if (item["childrens"]) {
            walker(item["childrens"], id);
          } else {
            stack.pop();
          }
        });
        if (going) stack.pop();
      };
      walker(array, id);
      return stack;
    },

    //顶部搜索事件
    searchEvent() {
      this.allNodes = this.$refs.list.data;
      this.forArr(this.allNodes, false);
      this.defaultExpandedKeys = [];
      if (this.inputValue) {
        this.Tree(this.inputValue, this.allNodes);
      }
    },
    // 表格展开取反事件
    forArr(arr, isExpand) {
      arr.forEach((i) => {
        this.$refs.list.toggleRowExpansion(i, isExpand);
        if (i.children) {
          this.forArr(i.children, isExpand);
        }
      });
    },

    Tree(name, data) {
      data.forEach((item) => {
        if (item.childrens) {
          // 调用递归函数
          this.Tree(name, item.childrens);
        }
        if (item.parentId) {
          if (name) {
            if (item.name.indexOf(name) !== -1) {
              this.defaultExpandedKeys.push(this.find(this.allNodes, item.id));
            }
          }
        }
      });
      this.defaultExpandedKeys = this.defaultExpandedKeys.flat();
    },
  },
};
</script>

---

el-tree实现搜索关键字变红

全部代码

<template>
  <div>
    <el-input placeholder="输入关键字进行过滤" v-model="inputValue"> </el-input>
    <button @click="searchTreeNode">搜索</button>
    <el-tree
      ref="tree"
      :data="treeListData"
      :props="props"
      node-key="id"
      highlight-current
      :default-expanded-keys="defaultExpandedKeys"
    >
      <!-- eslint-disable-next-line -->
      <span slot-scope="{ node }" class="custom-tree-node">
        <span v-if="!inputValue">{{ node.label }}</span>
        <span
          v-if="inputValue"
          v-html="
            node.label.replace(
              new RegExp(inputValue, 'g'),
              `<font style='color:red'>${inputValue}</font>`
            )
          "
        />
      </span>
    </el-tree>
  </div>
</template>
 
<script>
export default {
  methods: {
    //搜索
    //按名称搜索，查询树节点
    searchTreeNode() {
      //获取全部节点（这里的全部节点，指的就是每一项children的子项都包含在内）
      this.allNodes = this.$refs.tree.store._getAllNodes();
      //查询前，先把所有节点收起，默认展开节点清空
      this.allNodes.forEach((item) => {
        item.expanded = false;
      });
      this.defaultExpandedKeys = [];
      this.findNode(this.inputValue, this.allNodes);
    },
    //查找符合条件的树
    findNode(name, data) {
      console.log(name, data, "+++____++++");
      //data.forEach其实就是处理的所有的节点，不用在操作每一项的children了，每一项的children就包含在data里
      data.forEach((item) => {
        if (item.label.indexOf(name) != -1) {
          //包含搜索名字，把节点ID存到默认展开的数组里
          console.log(item.data.id, item.label, item, "rrrr");
          this.defaultExpandedKeys.push(item.data.id);
        }
      });
    },
  },

  data() {
    return {
      inputValue: "",
      defaultExpandedKeys: [],
      treeListData: [
        {
          id: 1,
          label: "晓红",
          children: [
            {
              id: 4,
              label: "呀呀呀",
              children: [
                {
                  id: 9,
                  label: "呀呀呀1",
                },
                {
                  id: 10,
                  label: "呀呀呀2",
                },
              ],
            },
          ],
        },
        {
          id: 2,
          label: "一级 2",
          children: [
            {
              id: 5,
              label: "二级 2-1",
            },
            {
              id: 6,
              label: "二级 2-2",
            },
          ],
        },
        {
          id: 3,
          label: "一级 3",
          children: [
            {
              id: 7,
              label: "二级 3-1",
            },
            {
              id: 8,
              label: "二级 3-2",
            },
          ],
        },
      ],
      props: {
        label: "label",
        children: "children",
      },
    };
  },
};
</script>