vue中在table表格里点击行勾选复选框的效果

最新推荐文章于 2024-08-27 15:50:43 发布

群狼之虎

最新推荐文章于 2024-08-27 15:50:43 发布

阅读量4.9k

点赞数 2

分类专栏： vue-cli 文章标签： vue中在table表格里点击行勾选复选框的效果

本文链接：https://blog.csdn.net/qq_34953053/article/details/102726811

版权

vue-cli 专栏收录该内容

45 篇文章 1 订阅

订阅专栏

先看一下效果：在这里插入图片描述
这就是效果图，在项目中的效果,效果也简单就是想记录一下
下面附的代码是在页面做的实例：
html:

<template>
  <div class="hello">
    <el-table class="tablessp" :data="tableData" highlight-current-row @current-change="handleCurrentChange" ref="multipleTable" @select="handleSelect" @selection-change="handleSelectionChange"  border fit highlight-current-row
        style="width:700px;min-height:260px;margin-top:8px;" height="260"
        :header-cell-style="{background:'#199ED8'}">
        <el-table-column type="selection" width="60" align="center"></el-table-column>
          <el-table-column prop="workSheetCode" label="工单编号" min-width="180" align="center">
          </el-table-column>
          <el-table-column prop="subProductCode" label="部件编号" min-width="180" align="center">
          </el-table-column>
          <el-table-column prop="lineName" label="生产线名称" align="center" min-width="150">
          </el-table-column>
    </el-table>
   
  </div>
</template>

js

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      tableData: [{
            workSheetCode: '2016-05-02',
            subProductCode: '王小虎',
            lineName: '上海市普陀区金沙江路 1518 弄'
          }, {
           workSheetCode: '2016-05-02',
            subProductCode: '王小虎',
            lineName: '上海市普陀区金沙江路 1518 弄'
          }, {
           workSheetCode: '2016-05-02',
            subProductCode: '王小虎',
            lineName: '上海市普陀区金沙江路 1518 弄'
          }, {
            workSheetCode: '2016-05-02',
            subProductCode: '王小虎',
            lineName: '上海市普陀区金沙江路 1518 弄'
          }]
    }
  },
  methods:{
    handlck(tab, event) {
    },
    handleSelect(val,row){
      if (val.length > 1) {
        this.$refs.multipleTable.clearSelection() // 清空所有选择
        val.shift()
        this.$refs.multipleTable.toggleRowSelection(row) //  选中当前选择
      }
      let selected = val.length && val.indexOf(row) !== -1
     },
    handleSelectionChange(val){
     
    },
    // 单选行
    handleCurrentChange(val){
       this.$refs.multipleTable.clearSelection() // 清空所有选择
       this.$refs.multipleTable.toggleRowSelection(val) //  选中当前选择
    },
  }
}
</script>
<style>



.hello .el-table thead{
      color:#fff;
    }
 .tablessp thead tr .el-checkbox__input{
     display: none;
}

</style>