el-table【合并行】+【筛选功能】+【配置列】+【点击跳转】功能

最新推荐文章于 2024-07-17 11:17:09 发布

Rare-Qi

最新推荐文章于 2024-07-17 11:17:09 发布

阅读量1.6k

点赞数 2

分类专栏： element-ui 学习文章标签： vue.js javascript 前端 ui elementui

本文链接：https://blog.csdn.net/weixin_51317101/article/details/127992539

版权

本文介绍了如何在使用 Element UI 的表格组件时，实现合并行、列筛选、自定义列配置以及点击单元格跳转功能。通过设置特定属性和方法，你可以轻松实现这些高级功能，提升前端界面的交互性和用户体验。

摘要由CSDN通过智能技术生成

效果图：

1. 【合并行】

通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。也可以返回一个键名为rowspan和colspan的对象。

:span-method="objectSpanMethod"

spanNumArr: [], // 合并行数
posNum: [], // 记录位置


created() {
  // 获取合并行行数
  this.getSpanNumArr(this.tableData)
},

methods: {
  // 获取合并行的行数
  getSpanNumArr(data) {
    this.spanNumArr = []
    this.posNum = 0
    for (var i = 0; i < data.length; i++) {
      if (i === 0) {
        this.spanNumArr.push(1)
        this.posNum = 0
      } else {
        if (data[i].name === data[i - 1].name) {
          this.spanNumArr[this.posNum] += 1
          this.spanNumArr.push(0)
        } else {
          this.spanNumArr.push(1)
          this.posNum = i
        }
      }
    }
  },
  // 设置合并行
  objectSpanMethod({ row, column, rowIndex, columnIndex }) {
    if (column.property == 'name') {
      const _row = this.spanNumArr[rowIndex]
      const _col = _row > 0 ? 1 : 0 // 0 值是为了去除错位
      return {
        rowspan: _row,
        colspan: _col
      }
    }
  },
}

2.【筛选功能】

在列中设置filtersfilter-method属性即可开启该列的筛选，filters 是一个数组，filter-method是一个方法，它用于决定某些数据是否显示，会传入三个参数：value, row 和 column。

:filters="tableFilter[item.prop]"
:filter-method="filterHandler"

tableFilter: {}, // 定义过滤的值

created() {
  this.$nextTick(() => {
    // 初始化时将table的所有数据赋值给tableFilter，即默认展示所有数据
    this.handleFilter(this.tableData) 
  })
}

methods:{
     // 过滤选中的值
    filterHandler(value, row, column) {
      const property = column['property']
      
      // 过滤操作需要修改dom结构，因此需要用到 this.$nextTick
      this.$nextTick(() => {
        this.handleFilter(this.tableData, property) // 过滤完的列表数据，选中的属性
      })
      return row[property] === value // value是filters里绑定的数据里选中的项的value
    },
    // 过滤的方法
    handleFilter(list, property) {
      
      // 遍历展示列的每一列
      this.finallyColumns.forEach(val =