treeTable树搜索工具

说明

树形表格全节点搜索功能基于treeTable组件

使用

<template>
  <div class="app-container authorityDiv">
    <div class="flex-space-between">
      <div class="flex flex-middle">
        <el-input
          class="filter-item"
          style="width: 200px"
          placeholder="请输入关键字,回车"
          v-model="searchKey"
          clearable
          @keyup.enter.native="searchFun"
        ></el-input>
        <el-button
          class="filter-item projectButton"
          type="primary"
          v-waves
          icon="el-icon-search"
          @click="searchFun"
        >
          查询
        </el-button>
      </div>
    </div>
    <tree-table
      :data="data"
      :columns="columns"
      :list-loading="listLoading"
      border
    ></tree-table>
  </div>
</template>

<script>
import TreeTable from '@/components/TreeTable/vsTreeTable.vue'
import waves from '@/directive/waves'
import { getList } from '@/api/system/authority'
import { deepCloneArray } from '@/utils'
import TreeTableSearch from '@/utils/treeTableSearch.js'
let treeTableSearch = new TreeTableSearch({
  color: 'red',// 搜索到关键字的展示颜色;string类型;默认red
  filterAttrs: ['name', 'code', 'description']// 可做为搜索的元素;Array类型;默认['name', 'code']
})
export default {
  name: 'Authority',
  components: {
    TreeTable
  },
  directives: {
    waves
  },
  data() {
    return {
      searchKey: null, // 搜索关键字
      data: [],
      orginalData: [],
      listLoading: false,
      columns: [
        {
          text: '权限名称',
          value: 'name'
        },
        {
          text: '权限编码',
          value: 'code',
          width: 200
        },
        {
          text: '描述',
          value: 'description'
        },
        {
          text: '定义',
          value: 'definition'
        }
      ]
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 获取所有权限
    getList() {
      this.listLoading = true
      getList({}).then((response) => {
        if (response.success) {
          this.data = response.result
          this.orginalData = deepCloneArray(response.result)
          this.searchKey && this.searchFun() // 当搜索关键字存在便进行搜索
          this.listLoading = false
        }
      })
    },
    searchFun() {
      const treeTableSearchObj = treeTableSearch.search(
        this.orginalData,
        this.searchKey
      )
      this.data = treeTableSearchObj.searchData
    }
  }
}
</script>

初始化

  import TreeTableSearch from '@/utils/treeTableSearch.js'// 工具所在路径
  let treeTableSearch = new TreeTableSearch({
    color: 'red',// 搜索到关键字的展示颜色;string类型;默认red
    filterAttrs: ['name', 'code', 'description']// 可做为搜索的元素;Array类型;默认['name', 'code']
  })
  ...

搜索

  treeTableSearch.search(
    this.data,// 部的list数据
    this.key// 所要搜索的关键词
  )

组件源码及综合示例参考

源码 (opens new window)示例 (opens new window)文档 (opens new window)