Vue:树形el-table的自定义文本过滤

树形el-table的自定义文本过滤

<template>
  <div class="app-container">
    <el-input v-model="search" placeholder="Filter keyword" style="margin-bottom:30px;"/>
    <el-table
      ref="menuTree"
      :data="treeTable"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column
        prop="name"
        label="名称"
        sortable
        width="180">
      </el-table-column>
      <el-table-column
        prop="path"
        label="访问路径"
        sortable
        width="180">
      </el-table-column>
      <el-table-column
        prop="component"
        label="组件路径"
        sortable
        width="180">
      </el-table-column>
      <el-table-column
        prop="permissionValue"
        label="权限值">
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <!-- v-if="node.level == 1 || node.level == 2" v-if="node.level == 3" v-if="node.level == 4"-->
          <el-button
            v-if="(scope.row.level == 1 || scope.row.level == 2) "
            type="text"
            size="mini"
            @click="() => {dialogFormVisible = true, menu.pid = scope.row.id}">添加菜单
          </el-button>
          <el-button
            v-if="scope.row.level == 3"
            type="text"
            size="mini"
            @click="() => {dialogPermissionVisible = true, permission.pid = scope.row.id}">添加功能
          </el-button>
          <el-button
            v-if="scope.row.level == 4 "
            type="text"
            size="mini"
            @click="() => updateFunction(scope.row)">修改功能
          </el-button>
          <el-button
            v-if="scope.row.level != 4 "
            type="text"
            size="mini"
            @click="() => getById(scope.row)">修改
          </el-button>
          <el-button
            type="text"
            size="mini"
            @click="() => remove(scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :visible.sync="dialogFormVisible" :title="dialogFormValue">
      <el-form ref="menu" :model="menu" :rules="menuValidateRules" label-width="120px">
        <el-form-item label="菜单名称" prop="name">
          <el-input v-model="menu.name"/>
        </el-form-item>
        <el-form-item label="访问路径" prop="path">
          <el-input v-model="menu.path"/>
        </el-form-item>
        <el-form-item label="组件路径" prop="component">
          <el-input v-model="menu.component"/>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="restData()">取 消</el-button>
        <el-button type="primary" @click="append()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 添加功能的窗口 -->
    <el-dialog :visible.sync="dialogPermissionVisible" title="添加功能">
      <el-form ref="permission" :model="permission" :rules="permissionValidateRules" label-width="120px">
        <el-form-item label="功能名称" prop="name">
          <el-input v-model="permission.name"/>
        </el-form-item>
        <el-form-item label="访问路径">
          <el-input v-model="permission.path"/>
        </el-form-item>
        <el-form-item label="组件路径">
          <el-input v-model="permission.component"/>
        </el-form-item>
        <el-form-item label="功能权限值" prop="permissionValue">
          <el-input v-model="permission.permissionValue"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="restData()">取 消</el-button>
        <el-button type="primary" @click="appendPermission()">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import menu from '@/api/acl/menu'

const menuForm = {
  name: '',
  pid: 0,
  path: '',
  component: '',
  type: '1'
}
const perForm = {
  permissionValue: '',
  type: '2',
  name: '',
  path: '',
  component: '',
  pid: 0
}

export default {

  data() {
    return {
      flag : -1,
      expandRow: [],
      search: '',
      tableData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      dialogFormValue: '添加菜单',
      dialogFormVisible: false,
      dialogPermissionVisible: false,
      menu: menuForm,
      permission: perForm,
      menuValidateRules: {
        name: [{required: true, trigger: 'blur', message: '菜单名必须输入'}],
        path: [{required: true, trigger: 'blur', message: '菜单路径必须输入'}],
        component: [{required: true, trigger: 'blur', message: '组件名称必须输入'}]
      },
      permissionValidateRules: {
        name: [{required: true, trigger: 'blur', message: '功能名称必须输入'}],
        permissionValue: [{required: true, trigger: 'blur', message: '功能权限值必须输入'}]
      }
    }
  },


  created() {
    this.fetchNodeList()
  },

  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
    }
  },
  methods: {
    // 将过滤好的树形数据展开
    setExpandRow(handleTreeData) {
      this.flag =-1
      if (handleTreeData.length) {
        for (let i of handleTreeData) {
          this.expandRow.push(i.id)
          if (i.children.length) {
            this.setExpandRow(i.children)
          }
        }
      }
    },
    //  树形表格过滤
    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) {
          if (treeData[i].type ==0 && match){
            this.flag =0
            searchValue = ''
            array.push({
              ...treeData[i],
              children: this.handleTreeData(treeData[i].children, searchValue),
            });
          }else if(treeData[i].type ==1 && match){
            if (this.flag == 0){
              this.flag = 1
            }
            searchValue =''
            array.push({
              ...treeData[i],
              children: this.handleTreeData(treeData[i].children, searchValue),
            });
            if (this.flag != 1){
              searchValue =this.search
            }
          }else {
            array.push({
              ...treeData[i],
              children: this.handleTreeData(treeData[i].children, searchValue),
            });
          }
        }
      }
      return array;
    },
    fetchNodeList() {
      menu.getNestedTreeList().then(response => {
        if (response.success === true) {
          this.tableData = response.data.children
          console.log(this.tableData)
        }
      })
    },
    remove(data) {
      console.log(data)

      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return menu.removeById(data.id)
      }).then(() => {
        this.fetchNodeList()// 刷新列表
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch((response) => { // 失败
        if (response === 'cancel') {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        } else {
          this.$message({
            type: 'error',
            message: '删除失败'
          })
        }
      })
    },
    appendPermission() {
      this.$refs.permission.validate(valid => {
        if (valid) {
          if (this.permission.id) {
            this.update(this.permission)
          } else {
            menu.saveLevelOne(this.permission).then(response => {
              this.dialogPermissionVisible = false
              this.$message({
                type: 'success',
                message: '添加功能成功'
              })
              // 刷新页面
              this.fetchNodeList()
              this.menu = {...menuForm}
              this.permission = {...perForm}
            })
          }
        }
      })
    },
    appendLevelOne() {
      menu.saveLevelOne(this.menu)
        .then(response => {
          this.dialogFormVisible = false
          this.$message({
            type: 'success',
            message: '添加一级菜单成功'
          })
          // 刷新页面
          this.fetchNodeList()
          this.menu = {...menuForm}
          this.permission = {...perForm}
        })
        .catch(response => {
          // 你们写：判断点击取消清空一下
          this.dialogFormVisible = false
          this.$message({
            type: 'error',
            message: '添加一级菜单失败'
          })
          this.menu = {...menuForm}
          this.permission = {...perForm}
        })
    },

    append() {
      this.$refs.menu.validate(valid => {
        if (valid) {
          if (!this.menu.id) { // 添加
            if (this.menu.pid == 0) {
              this.appendLevelOne() // 一级分类的添加
            } else {
              this.appendLevelTwo() // 二级分类的添加
            }
          } else { // 修改
            this.update(this.menu)
          }
        }
      })
    },

    update(obj) {
      debugger
      menu.update(obj).then(response => {
        this.dialogFormVisible = false
        this.$message({
          type: 'success',
          message: '修改成功'
        })
        // 刷新页面
        this.fetchNodeList()
        this.restData()
      })
    },
    appendLevelTwo() {
      menu.saveLevelOne(this.menu)
        .then(response => {
          // 1、把文本框关
          this.dialogFormVisible = false
          // 2、提示成功
          this.$message({
            type: 'success',
            message: "添加二级分类成功"
          })
          // 3、刷新页面
          this.fetchNodeList()
          // 4、把menu清空
          this.menu = {...menuForm}
          this.permission = {...perForm}
        })
        .catch(response => {
          // 1、把文本框关
          this.dialogFormVisible = false
          // 2、提示成功
          this.$message({
            type: 'error',
            message: "添加二级分类失败"
          })
          // 3、把menu清空
          this.menu = {...menuForm}
          this.permission = {...perForm}

        })
    },
    getById(data) {
      this.dialogFormVisible = true
      this.menu = data
    },
    updateFunction(data) {
      this.dialogPermissionVisible = true
      this.permission = data
    },
    restData() {
      this.dialogPermissionVisible = false
      this.dialogFormVisible = false
      this.menu = {...menuForm}
      this.permission = {...perForm}
    }
  }
}
</script>

预览效果：

代码可以直接搬用。核心方法在setExpandRow和handleTreeData，使用了递归。