乐趣区

关于前端:实现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>

成果如下:

退出移动版