VUE中实现table自定义表头，并添加鼠标点击事件

• 页面预览：
  
  
  
  - 代码实现：

<template>
<div>
<div>
<el-table
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
border>
<el-table-column
label="日期"
prop="date">
</el-table-column>
<el-table-column
label="姓名"
prop="name">
</el-table-column>
<el-table-column>
<template slot="header" slot-scope="scope">
<span @mouseup="doSuccess()">
<el-radio v-model="countType" label="1">
已完成量
</el-radio>
</span>
</template>
<template slot-scope="scope">
<el-input-number v-model="scope.row.successNumber" :min="0">
</el-input-number>
</template>
</el-table-column>
<el-table-column>
<template slot="header" slot-scope="scope">
<span @mouseup="doNotSucc()">
<el-radio v-model="countType" label="2">
未完成量
</el-radio>
</span>
</template>
<template slot-scope="scope">
<el-input-number v-model="scope.row.notSuccNumber" :min="0">
</el-input-number>
</template>
</el-table-column>
</el-table>
</div>
<div>
<el-button type="primary" @click="submit()">提交</el-button>
</div>
</div>
</template>

<script>
export default {
data() {
return {
countType: '2',
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
successNumber: 0,
notSuccNumber: 0
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄',
successNumber: 0,
notSuccNumber: 0
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
successNumber: 0,
notSuccNumber: 0
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
successNumber: 0,
notSuccNumber: 0
}],
search: ''
}
},
methods: {
doSuccess() {
this.$message({message: '点击已完成执行！', type: 'success', offset: 150})
},
doNotSucc() {
this.$message({message: '点击未完成执行！', type: 'success', offset: 150})
},
submit() {
console.log(this.tableData);
}
},
}
</script>