el-table 自定义表头（按钮） UI

原文地址： https://www.jianshu.com/p/93a455fe7fe1

 

个人记录用

1. 动态UI

?

1 2	<el-table-column align="center" :render-header="renderBtn"> </el-table-column>

　　

?

1 2 3 4 5 6 7 8 9 10 11 12

renderBtn() {     return (         <div>           <el-button onClick={this.handleMultipleStart} type="success" size="small">批量启用</el-button>            <el-button onClick={this.handleMultipleRestart} type="warning" size="small">批量重启</el-button>            <el-button onClick={this.handleMultipleStop} type="danger" size="small">批量停用</el-button>                 { this.testUrl ?            <a class="el-button    el-button--small"                         href={this.testUrl} target="_blank" >接口测试</a> : ''}         </div>     ) }

2.  固定UI

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<el-table-column prop="name">     <template slot="header">         <el-button             @click="changeValue"             type="success"             size="small"         >             点击事件         </el-button>     </template>     <template slot-scope="scope">         <span>{{ scope.row.name }}</span>     </template> </el-table-column>