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

最新推荐文章于 2024-07-24 10:31:42 发布

在下令狐

最新推荐文章于 2024-07-24 10:31:42 发布

阅读量2.6k

点赞数

分类专栏： Vue 文章标签： vue vue.js

本文链接：https://blog.csdn.net/yang353933546/article/details/106757730

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

页面预览：

- 代码实现：

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