Element UI Table 组件:合并表头某一列内容的教程
<template>
<el-table :data="tableData" border>
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="age" label="Age"></el-table-column>
<el-table-column prop="address" label="Address"></el-table-column>
<el-table-column label="Custom Column" v-slot="{ column }">
<!-- 自定义需要合并的列的内容 -->
<template v-if="column.property === 'address'">
<span>Custom Column</span>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: 'John', age: 25, address: 'Address 1' },
{ name: 'Mike', age: 30, address: 'Address 2' },
{ name: 'Lisa', age: 28, address: 'Address 3' }
]
};
}
};
</script>
<p>在上面的示例中,我们使用了 el-table-column 的 scoped slot,通过判断 column.property 的值,来自定义需要合并的列的内容。在这个示例中,我们自定义了 label 为 "Custom Column" 的列的内容,如果 column.property 的值为 'address',则显示 "Custom Column"。</p>
<p>这样,就可以通过自定义表头的内容来实现合并表头中的某一列的功能。</p>
原文地址: https://www.cveoy.top/t/topic/pafb 著作权归作者所有。请勿转载和采集!