vue+Element-UI 自定义表头 + 合并表头

原创已于 2022-04-20 14:50:27 修改 · 612 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

于 2022-04-20 14:41:18 首次发布

Web 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何在El-Table组件中实现日期、姓名等信息的展示，并演示了如何通过自定义header实现额外的'自定义功能'按钮，点击后触发console.log()。

:render-header

<el-table :data="tableData" style="width: 100%">
	<el-table-column prop="date" label="日期"> </el-table-column>
	<el-table-column
			align="center"
			:render-header="renderHeader"
		>
		<el-table-column prop="name" label="姓名"> </el-table-column>
		<el-table-column prop="province" label="省份"> </el-table-column>
		<el-table-column prop="city" label="市区"> </el-table-column>
		<el-table-column prop="zip" label="邮编"> </el-table-column>
	</el-table-column>
	<el-table-column prop="address" label="地址"> </el-table-column>
</el-table>

  methods: {
    renderHeader() {
      return (
        <div>
          <span>信息</span>
          <a class="main-table-a" on-click={() => this.renderHeaderCallback()}>
            自定义功能
          </a>
        </div>
      );
    },
    renderHeaderCallback() {
      console.log("-----")
    },
 }