关于前端:实现element表格table组件表头自定义

需要是在表头自定义增加数据的办法,用table-column间接绑定@click事件不失效,即便胜利了也不美观,尝试将表头做成增加的按钮

查问文档,发现一个很有意思的属性——

尝试几次后胜利实现

<el-table-column
                label="Operate"
                width="80"
                align="center"
              >
                <template slot="header"> //header插槽实现表头自定义
                  <el-button
                    icon="el-icon-plus"
                    circle
                    @click="openAdd"
                  />
                </template>
                <template slot-scope="scope">
                  <el-button
                    type="primary"
                    size="mini"
                    @click="handleEdit(scope.row.id)"
                  >
                    编辑
                  </el-button>
                  <br>
                  <el-button
                    type="info"
                    size="mini"
                    @click="handleDelete(scope.row.id)"
                  >
                    删除
                  </el-button>
                </template>
              </el-table-column>

成果如下:

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理