element树形表格 模糊查询前端

查询条件

<el-form :model="search" size="small" label-width="80px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="名称">
            <el-input v-model="search.mc" clearable placeholder="请输入名称" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="描述">
            <el-input v-model="search.ms" clearable placeholder="请输入描述" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item style="text-align:left">
            <el-button size="small" type="primary" @click="filterTreeData">查询</el-button>
            <el-button size="small" @click="resetmh">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

树形表格数据

 <el-table
      border
      :data="treeTableData"
      row-key="id"
      :expand-row-keys="expandRowKeys"
      :tree-props="{ children: 'children', hasChildren: 'haschildren' }"
    >
      <el-table-column type="selection" width="55" :selectable="selected"></el-table-column>
      <el-table-column prop="mc" label="名称" width="300" :show-overflow-tooltip="true" />
      <el-table-column prop="ms" label="描述" :show-overflow-tooltip="true" />
      <el-table-column prop="sstdmc" label="所属团队" width="200" :show-overflow-tooltip="true" />
    </el-table>

data数据

return{
     // 表格树数据
      tableData: [],
      expandRowKeys:[],
// 用于展现的表格树数据
 treeTableData: [],
    search: {
        mc: '',
        ms: '',
      },
}

js数据

      //重置
    resetmh(){
      this.search.mc = "";
      this.search.ms = "";
      this.filterTreeData()
    },
 // 过滤数据
    filterTreeData() {
      var searchValue = this.search
      if (searchValue.mc != '' || searchValue.ms != '') {
        let treeData = this.tableData
        let handleTreeData = this.handleTreeData(treeData, searchValue)
        this.setExpandRow(handleTreeData)
        this.treeTableData = handleTreeData
      } else {
        this.treeTableData = this.tableData
      }
    },
    //  树形表格过滤
    handleTreeData(treeData, searchValue) {
      if (!treeData || treeData.length === 0) {
        return []
      }
      const array = []
      for (let i = 0; i < treeData.length; i += 1) {
        // 根据需求修改过滤逻辑
        let match = false
        let flag = false
        let f1 = true
        if (this.search.mc !== '') {
          flag = treeData[i]['mc'].includes(searchValue.mc)
          f1 = flag
        }
        if (this.search.ms !== '') {
          flag = treeData[i]['ms'].includes(searchValue.ms)
          if(flag === true && f1 === false){
            flag = false
          }
        }
        match |= flag
        // for (let key in treeData[i]) {
        // 下面这段逻辑
        // 判断对象{key:value}的value是否为String类型，如果是，那就判断value是否存在要过滤的值，只要有一个为true，那就跳出循环
        // if (typeof treeData[i][key] == 'string') {
        //   // x |= y // x = x | y，|：位运算符，只要二进制数字存在1便为1
        //   // 大概为： false:0  true:1   0|0为0    0|1或1|0或1|1都为1
        //   match |= treeData[i][key].includes(searchValue)
        //   if (match) {
        //     break
        //   }
        // }
        if (this.handleTreeData(treeData[i].children, searchValue).length > 0 || match) {
          // ... 表示 js的展开能读取的元素
          array.push({
            // 展开treeData[i]里所有能读取的元素并赋予对象
            ...treeData[i],
            children: this.handleTreeData(treeData[i].children, searchValue)
          })
        }
      }
      return array
    },

后台接口数据

  //查询知识库列表
    async getData() {
      const { data: res } = await this.$postRequest('zskflgl/getZskflTreeData', {
        mc: this.search.mc,
        ms: this.search.ms,
        sstd: this.search.sstd,
        sstdmc: this.search.sstdmc
      })
      if (res.flag === 'Y') {
        this.tableData = res.data
        this.filterTreeData()
      } else {
        this.$message.error(res.message)
      }
    },