使用<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 ;

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