欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-04-19 19:36:19
...

先看一下效果:vue中在table表格里点击行勾选复选框的效果
这就是效果图,在项目中的效果,效果也简单就是想记录一下
下面附的代码是在页面做的实例:
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>