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

这篇具有很好参考价值的文章主要介绍了el-table【合并行】+【筛选功能】+【配置列】+【点击跳转】功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

效果图：

el-table 如何做筛选,element-ui 学习,vue.js,javascript,前端,ui,elementui

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。文章来源地址https://www.toymoban.com/news/detail-597643.html

: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 => {

到了这里，关于el-table【合并行】+【筛选功能】+【配置列】+【点击跳转】功能的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！