el-table合并单元格的demo
时间: 2024-08-14 12:07:20 浏览: 59
在Vue.js中,`el-table`组件是Element UI库中的表格组件,可以方便地创建动态布局的表格。要合并单元格,你可以使用`span-method`属性和自定义的渲染函数。下面是一个简单的示例:
```html
<template>
<el-table :data="tableData">
<el-table-column type="index" label="#" width="50"></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-column prop="phone" label="电话"></el-table-column>
<!-- 使用span-method合并单元格 -->
<el-table-column label="信息" span-method="customRender" width="400">
<template slot-scope="scope">
<div v-for="(item, index) in scope.row.info" :key="index">
<span>{{ item }}</span>
<!-- 如果是最后一个项则添加分割线 -->
<span v-if="!$last"> | </span>
</div>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ id: 1, name: '张三', address: '上海市', phone: '13333333333', info: ['技能一', '技能二', '技能三'] },
// ... 其他数据项
],
// 自定义合并单元格的render方法
customRender(h, params) {
return h('div', params.row.info.join(' | '), { style: 'white-space: nowrap;' });
}
};
}
};
</script>
```
在这个例子中,我们定义了一个`info`列,它包含了一系列需要合并的项目。通过`span-method`设置一个自定义的渲染方法`customRender`,我们在循环遍历`info`数组,并使用`v-for`指令生成每个单独的单元格。
注意,`span-method`接受两个参数:一个是当前行的数据(`h`, `params.row`),另一个是当前单元格的索引(`index`)。在这里,我们手动合并了每一行的`info`字段。
阅读全文