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>