您好,登录后才能下订单哦!
今天小编给大家分享一下elementUi表格合并行数据并展示序号的方法是什么的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。
效果如下:属于同一个厂商的数据要合并成一行
element官网对于合并行和列是这样说的:
通过给
table
传入span-method
方法可以实现合并行或列,方法的参数是一个对象,里面包含当前行row
、当前列column
、当前行号rowIndex
、当前列号columnIndex
四个属性。该函数可以返回一个包含两个元素的数组,第一个元素代表rowspan
,第二个元素代表colspan
。 也可以返回一个键名为rowspan
和colspan
的对象。
实现合并行思路:需要一个数据来记录需要合并的行数据(数字几就代表合并几行,比如 [1, 2, 0, 1]就是第一行第四行不变,第二三行合并成一行),还要有一个变量来记录数组下标。 注意:后台返回的数据一定要有能区分唯一性的数据,来判断前后两条数据是否一样。 主要代码如下:
<base-table :table-data="tableData" :table-title="tableTitle" :span-method="objectSpanMethod" max-height="600px" v-bind="$attrs" > <template slot-scope="scope" slot="serialNo"> {{ scope.row.serialNo }} </template> .... </base-table>
const tableTitle = [ { key: 'serialNo', title: '序号', align: 'center', width: '100', scopedSlots: { customRender: 'serialNo' } }, { key: 'unionList', title: '厂商名称(编号)', align: 'center', width: '300px', scopedSlots: { customRender: 'unionList' } }, { key: 'unionName', title: 'MQ厂商', tooltip: true, align: 'center' }, ] export default { data() { return { tableTitle, tableData: [], spanArr: [], // 存合并行数据的数组 pos: 0,// 合并行数据数组下标 rowIndex: 1 // 序号 } }, methods: { getTableData() { this.tableData = [ { accessId: '1', id: 1, mqPassword: '1011', privateKey: '1011', publicKey: '1011', unionList: "[{\"union_name\":\"乐乐\",\"union_id\":\"200160\"}]", unionName: '1011' }, { accessId: '2', id: 2, mqPassword: '1012', privateKey: '1012', publicKey: '1012', unionList: "[{\"union_name\":\"小太阳\",\"union_id\":\"200734\"},{\"union_name\":\"包子\",\"union_id\":\"200737\"}]", unionName: '1012' }, { accessId: '3', id: 3, mqPassword: '1013', privateKey: '1013', publicKey: '1013', unionList: "[{\"union_name\":\"小太阳\",\"union_id\":\"200734\"},{\"union_name\":\"包子\",\"union_id\":\"200737\"}]", unionName: '1013' }, { accessId: '4', id: 4, mqPassword: '1014', privateKey: '1014', publicKey: '1014', unionList: "[{\"union_name\":\"测试\",\"union_id\":\"200160\"}]", unionName: '1014' }, ] this.getSpanArr(this.tableData) // 获取合并单元格数据和序号 }, getSpanArr(data) { // 重新查询后,要清空行数据数组、序号重置为1 this.spanArr = [] this.rowIndex = 1 // 遍历数据,判断前后两条数据是否相同 for (let i = 0; i < data.length; i++) { data[i].unionList = JSON.parse(data[i].unionList) data[i].unionArr = data[i].unionList.map(i => i.union_id).join(',') if (i === 0) { this.spanArr.push(1) this.pos = 0 data[i].serialNo = this.rowIndex this.rowIndex++ } else { // 判断当前元素与上一元素是否相同 if (data[i].unionArr === data[i - 1].unionArr) { this.spanArr[this.pos] += 1 this.spanArr.push(0) } else { this.spanArr.push(1) this.pos = i data[i].serialNo = this.rowIndex this.rowIndex ++ } } } }, objectSpanMethod({ row, column, rowIndex, columnIndex }) { // 合并操作和厂商名称 if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) { const _row = this.spanArr[rowIndex] const _col = _row > 0 ? 1 : 0 // rowspan和colspan都为0,则表示这一行不显示,[x, 1]则表示合并了多少行 return { rowspan: _row, colspan: _col } } }, } }
以上就是“elementUi表格合并行数据并展示序号的方法是什么”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。