el-table那些事
1、获取el-table所有勾选的行数据2、el-table自定义列标题3、el-table列可编辑,加入el-input等4、el-table勾选只能选一条数据5、el-table表头的全选框禁止使用6、el-table表头居中7、el-table复选框默认全选8、显示的字段是数组类型,并且需要将每个元素通过符号连接起来9、点击当前行同时将复选框勾选
用于记录工作和日常学习遇到的坑,需求。
vue3+element-plus+ts
1、获取el-table所有勾选的行数据
1、需要先声明一个ref变量,并赋值给el-table 2、通过el-table提供的getSelectionRows()函数获取选中的"行对象"数据集
const tableRef = ref();
const selectedAry = tableRef.value.getSelectionRows();
console.log(selectedAry);
2、el-table自定义列标题
操作
3、el-table列可编辑,加入el-input等
v-model="scope.row.skuId" :data="spuLinkTree" :render-after-expand="false" placeholder="请选择物料" @change="selectSku(scope.row)" /> 4、el-table勾选只能选一条数据 无论在table中勾选几次数据,都只能选中一条。 :data="tableData" style="width: 100%; margin-bottom: 20px; height: 300px" border ref="chooseSkuTableRef" @select="handleSelectionChange" > //列表复选框点击事件(限制列表只能选择一条数据) const handleSelectionChange = (selection, row) => { // 判断长度大于1 if (selection.length > 1) { // shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。 // 该方法不创建新数组,而是直接修改原有的 arrayObject。 let del_row = selection.shift(); // 其余的都不选中 chooseSkuTableRef.value.toggleRowSelection(del_row, false); } }; 5、el-table表头的全选框禁止使用 需求是“el-table表头的全选框禁止使用,但是还不能隐藏” el-table标签中加入@select-all=“selectAll” :data="tableData" style="width: 100%; margin-bottom: 20px; height: 300px" border ref="chooseSkuTableRef" @select="handleSelectionChange" @select-all="selectAll" > //禁用el-table的表头全选功能 const selectAll = () => { chooseSkuTableRef.value.clearSelection(); }; 6、el-table表头居中 :header-cell-style=“{‘text-align’:‘center’}” height="90%" class="sa-table" :data="currentTableData" :header-cell-style="{ 'text-align': 'center' }" row-key="orderNo" @selection-change="handleSelectionChange" stripe > 7、el-table复选框默认全选 normalTable.value.toggleAllSelection(); 8、显示的字段是数组类型,并且需要将每个元素通过符号连接起来 9、点击当前行同时将复选框勾选 需要在el-table上添加 @row-click="handleRowClick"事件 代码见下方 :data="goodsList" @row-click="handleRowClick" ref="goodsTableRef" > const goodsTableRef = ref(); const handleRowClick = (row) => { goodsTableRef.value.toggleRowSelection(row); }; 参考链接
发表评论