参考的API：https://www.antdv.com/components/table-cn/#API

以下放2张 实现的效果图：

 

实现：

expand

点击展开图标时触发

Function(expanded, record)

expandedRowKeys

展开的行，控制属性

string[]

<s-table
            ref="table"
            size="middle"
            rowKey="id"
            :columns="columns"
            :pageNum="pagination.page"
            :pageSize="pagination.pageSize"
            :data="loadData"
            :expandedRowKeys="expandedKeys"
            @expand="onExpand"
            v-tableScrollBar="'overflow'"
            :scroll="{ y: 'calc(100vh - 430px)' }"
            :showPagination="false"
          >

这两个主要是获取展开的行的数组，方法如何下：

onExpand(expanded, record) {
      if (expanded) {
        // 设置展开窗Key
        this.onExpandedRowsChange(record);
      } else {
        if (this.expandedKeys.length) {
          this.expandedKeys = this.expandedKeys.filter(v => {
            return v != record.id;
          });
        }
      }
    },
    onExpandedRowsChange(rows) {
      this.expandedKeys.push(rows.id);
    }

搜索的方法：

toSearch() {
      var parameter = {};
      // let value = this.queryParam.dutyName;
      parameter.pageNo = 1;
      parameter.pageSize = 99999;
      const wrapper = { wrapper: true };
      var that = this;
      if (this.searchValue && this.searchValue == this.queryParam.dutyName) {
        //一样的不去搜索
        return;
      }
      this.searchValue = null;
      getDutiesFetch(Object.assign(parameter, this.queryParam, wrapper)).then(res => {
        let findIdArray = [];
        res.data.rows.map(v => {
          if (!findIdArray.includes(v.parentId)) {
            //过滤已有的父节点
            findIdArray.push(v.parentId);
          }
        });
        if (!findIdArray.length) {
          that.notifiyInfo('未找到');
          return;
        }
        this.searchValue = this.queryParam.dutyName;
        this.expandedKeys = [];
        findIdArray = findIdArray.filter(v => {
          return v != -1; //过滤顶级节点
        });
        if (!findIdArray.length) return; //如果都在父节点就不需要展开了
        this.expandedKeys = this.getFindRowsKey(findIdArray, this.treeData);
      });
    },

getFindRowsKey 主要是根据搜索到的值把它的父节点找出来：

 getFindRowsKey(ids, tree) {
      for (let i = 0; i < tree.length; i++) {
        const node = tree[i];
        if (node.children) {
          this.getFindRowsKey(ids, node.children);
        }
        if (ids.includes(node.id) && !ids.includes(node.parentId) && node.parentId != -1) {
          ids.push(node.parentId);
        }
      }
      return ids;
    }

这样就可以把要搜索到结果的节点展开。

最后就是样式部分：

<span slot="dutyName" slot-scope="text">
              <span v-if="text.indexOf(searchValue) > -1"
                >{{ text.substr(0, text.indexOf(searchValue)) }}<span style="color: #f50">{{ searchValue }}</span
                >{{ text.substr(text.indexOf(searchValue) + searchValue.length) }}</span
              >
              <template v-else>{{ text }}</template>
            </span>