ElementUI自定义修改列的内容（一列显示多个文本）

背景

ElementUI组件库中的表格，每一列默认只能显示一个文本，但是在项目需求中，需要一列显示两个文本内容，如下图所示：

这样应该如何实现呢？🤔

方式一：render-header

ElementUI中暴露了render-header属性，我们可以使用这个属性来实现这个功能。

<el-table-column prop="address" label="地址" :render-header="renderHeader"></el-table-column>

methods中添加代码：

renderHeader(h, { column, $index }) {
  // 这里在最外层插入一个div标签
  return h("span", [
    // h即为cerateElement的简写
    h("span", {
      // 表示内容
      domProps: {
        innerHTML: column.label + ' <a style="color: blue">更多</a>'
      },
      on: {
        click: () => {
          // 这里可以添加点击事件
        }
      }
    })
  ]);
}

这样的确可以实现上面的那个功能，但是在控制台会有一个警告：

与render-header相比，scoped-slot更易于使用。建议使用scoped-slot

方式二：scoped-slot

所以我们现在尝试用scoped-slot来实现这个功能。

<el-table-column prop="address" label="地址">
  <template slot="header" slot-scope>
    <span>地址</span>
    <span style="color:blue;margin-left:5px">更多</span>
  </template>
</el-table-column>

这样，就可以实现功能了，而且控制台也没有警告，是不是很开心呢！🎈