vue+element跨行跨列合并 _table组件

现在vue还是很流行，大家都在学习并且使用vue框架，element-ui是饿了么基于vue.js编写的前端ui框架，像其他ui框架一样，极大提高了前端工作效率，文档也很简单易懂，具体使用可以到官方文档查看，可是在使用table组件过程中，会遇到一个问题，table跨行跨列怎么实现？
首先在html文档中使用element-ui时需要引入相关的SDN:

< !-- import CSS --> < link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> < !-- import Vue before Element --> < script src="https://unpkg.com/vue/dist/vue.js">< /script> < !-- import JavaScript --> < script src="http://img.readke.com/220411/01432B5c-1.jpg">< /script>

下面是原来的table组件样式：

文章图片
1、合并列使用arraySpanMethod函数该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，实际上就是给td加上rowspan属性，第二个元素代表colspan，实际上就是给td加上colspan属性。也可以返回一个键名为rowspan和colspan的对象，下面来看例子：

文章图片
1.1、在表格中加入:span-method=” arraySpanMethod” 属性

< template> < el-table :span-method="arraySpanMethod" :data="http://www.srcmini.com/tableData" border style="width: 100%"> < el-table-column prop="date" label="日期" width="180"> < /el-table-column> < el-table-column prop="name" label="姓名" width="180"> < /el-table-column> < el-table-column prop="address" label="地址"> < /el-table-column> < /el-table> < /template>

1.2、在methods中加入arraySpanMethod函数

new Vue({ el: '#app', data: function() { return { tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }] } }, methods: { arraySpanMethod({row, column, rowIndex, columnIndex}) { if (rowIndex % 2 === 0) {//判断条件可以设置成你想合并的行的起始位置，本例子是除了标题第一行 if (columnIndex === 1) {///判断条件可以设置成你想合并的列的起始位置，本例子是第二列开始 return [1,2]; //合并第一单元格至第二单元格 } else if (columnIndex === 1) { return [0, 0]; } } }, }})

2、合并行：objectSpanMethod

文章图片
2.1、在表格中加入:span-method=” objectSpanMethod” 属性

< template> < el-table :span-method="objectSpanMethod" :data="http://www.srcmini.com/tableData" border style="width: 100%"> < el-table-column prop="date" label="日期" width="180"> < /el-table-column> < el-table-column prop="name" label="姓名" width="180"> < /el-table-column> < el-table-column prop="address" label="地址"> < /el-table-column> < /el-table> < /template>

2.2、在methods中加入objectSpanMethod函数如下代码

objectSpanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 1) {//判断条件可以设置成你想合并的列的起始位置，本例子是第二列开始 if (rowIndex % 2 === 0) {//判断条件可以设置成你想合并的行的起始位置，本例子是除了标题第一行 return { rowspan: 2, colspan: 1 }; } else { return { rowspan: 0, colspan: 0 }; } } }

【vue+element跨行跨列合并】以上是在element中使用table组件合并行，合并列的问题。很高兴你还能看到这里,有啥问题可以留言告诉我，一起交流学习,如果觉得有点用，麻烦点个赞吧，没功劳都有苦劳呀。