element ui 樹形表格過濾查詢數據解決

element項目有需要做一個前端不請求接口來查詢樹形數據的需求。不要糾結樣式什么的，重點是實現對吧。

另外附上codepen的在線demo：https://codepen.io/saberinorykiss/pen/VwagPjK

 

 

 在這里分享一下吧，廢話不多說，直接上代碼：

<template>
  <div class="app-container">
    <el-input
      v-model="search"
      size="mini"
      placeholder="輸入關鍵字搜索"/>
    <el-table
      :data="treeTable"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      :expand-row-keys="expandRow"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column
        prop="date"
        label="日期"
        sortable
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        sortable
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      search: '',
      expandRow: [],
        tableData: [{
          id: 1,
          date: '2016-05-02',
          name: '王小虎1',
          address: '上海市普陀區金沙江路 1518 弄'
        }, {
          id: 2,
          date: '2016-05-04',
          name: '王小虎2',
          address: '上海市普陀區金沙江路 1517 弄'
        }, {
          id: 3,
          date: '2016-05-01',
          name: '王小虎3',
          address: '上海市普陀區金沙江路 1519 弄',
          children: [{
              id: 31,
              date: '2016-05-01',
              name: '王小虎4',
              address: '上海市普陀區金沙江路 1519 弄'
            }, {
              id: 32,
              date: '2016-05-01',
              name: '張三',
              address: '上海市普陀區金沙江路 1519 弄'
          }]
        }, {
          id: 4,
          date: '2016-05-03',
          name: '李二蛋',
          address: '上海市普陀區金沙江路 1516 弄'
        }],
    }
  },
  computed:{
    treeTable:function(){
      var searchValue=this.search;
      if(searchValue){
        // 一般表格的查詢
        // return  this.tableData.filter(function(dataNews){
        //   return Object.keys(dataNews).some(function(key){
        //     return String(dataNews[key]).toLowerCase().indexOf(search) > -1
        //   })
        // })
        let treeData = this.tableData
        let handleTreeData = this.handleTreeData(treeData, searchValue)
        this.setExpandRow(handleTreeData)
        this.expandRow = this.expandRow.join(",").split(",")
        return handleTreeData
      }
      return this.tableData
    }
  },
  created() {
  },
  methods: {
    //  樹形表格過濾
    handleTreeData(treeData, searchValue) {
      if (!treeData || treeData.length === 0) {
          return [];
        }
        const array = [];
        for (let i = 0; i < treeData.length; i += 1) {
          let match = false;
          for(let pro in treeData[i]){
            if(typeof(treeData[i][pro])=='string'){
              match |= treeData[i][pro].includes(searchValue);
              if(match) break;
            }
          }
          if (this.handleTreeData(treeData[i].children, searchValue).length > 0 || match ) {
            array.push({
              ...treeData[i],
              children: this.handleTreeData(treeData[i].children, searchValue),
            });
          }
        }
      return array;
    },
    // 將過濾好的樹形數據展開
    setExpandRow(handleTreeData) {
      if(handleTreeData.length) {
          for (let i of handleTreeData) {
            this.expandRow.push(i.id)
            if(i.children.length) {
              this.setExpandRow(i.children)
            }
          }
        }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>