中兴通讯的网站建设分析,做相片网站,建设网站的用途,网页设计与制作相关书籍el-table的复选框格子很小每次点击都点不到#xff0c;又不想设置行点击#xff0c;因为每次复制内容都会选中#xff0c;实现效果是点击el-table的复选框单元格就可以选中 templatediv stylewidth: 60vw; margin: 10px;el-table :data又不想设置行点击因为每次复制内容都会选中实现效果是点击el-table的复选框单元格就可以选中 templatediv stylewidth: 60vw; margin: 10px;el-table :datastate.tableData refmultipleTableRef selection-changehandleSelectionChange borderel-table-column typeselection width55 :class-nameall-selection /el-table-column typeindex label序号 width55 aligncenter fixed /// 如果某一行的内容超出的话添加超出省略 show-overflow-tooltip 或者增大复选框的高度el-table-column label姓名 propname aligncenter show-overflow-tooltip/el-table-column label年龄 propage aligncenter //el-table/div
/templatescript setup
import { ref, reactive, onMounted } from vue;
// 表格ref
const multipleTableRef ref();
// 存放选中数据
const multipleSelection ref();const state reactive({tableData: [{name: 张三,age: 1,},{name: 张四,age: 2,},{name: 张五,age: 3,},],
});onMounted(() {});// 选中的回调
const handleSelectionChange (val) {multipleSelection.value val;
};
/scriptstyle scoped langscss
:deep(.el-table__body) {.all-selection {.cell {// 宽度设置满格width: 100%;// 去掉原有的paddingpadding: 0;// 这个是关键height需要设置为你表格里最大高度height: 40px;.el-checkbox {height: 100%;width: 100%;padding-left: 10px;}}}
}
/style
