element-ui/Vue 如何实现点击单元格选中复选框?使用@cell-click - 个人笔记

使用<v-table>标签, <v-table-column type="selection"> 实现第一些复选框时, 用户点击复选框非常不方便, 需要精准的点击到复选框的小框内, 如何提高用户体验?

 绑定事件,点击复选框所在单元格时选定此复选框

 

在 <v-table> 中 绑定事件: @cell-click="cellclick"

 

 

 <el-table ref="multipleTable" id="datatable" class="tables" :data="list" :max-height="tableHeight" v-loading.body="listLoading" :cell-style="cellClassName" element-loading-text="拼命加载中" border fit highlight-current-row  :row-class-name="tableRowClassName" 
        @selection-change="handleSelectionChange" @sort-change='sortChange' :header-cell-style="tableHeaderCellStyle" @header-dragend="colChange" @cell-click="clickcell">

 

 

实现函数:
 

// 点击一个单元格
clickcell(row, column, cell, event){
    //console.log(row);
    //console.log(column);
    //console.log(cell);
    //console.log(event);
    if(column.type=="selection"){
        this.$refs.multipleTable.toggleRowSelection(row)
    }
},

同样的方式也可以绑定一个行, @row-click ;

参数自动传递到绑定的函数中