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

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

 

个人记录用

1. 动态UI

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

　　

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

<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>