el |
您所在的位置：网站首页 › 筛选合并单元格 › el |
el
|
效果图：
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 => { |
【本文地址】
今日新闻 |
推荐新闻 |