<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 为 &quot;Custom Column&quot; 的列的内容,如果 column.property 的值为 'address',则显示 &quot;Custom Column&quot;。</p>
<p>这样,就可以通过自定义表头的内容来实现合并表头中的某一列的功能。</p>
Element UI Table 组件:合并表头某一列内容的教程

原文地址: https://www.cveoy.top/t/topic/pafb 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录