1. el-table在做多选时,需要记录已经选择的项,但是每次关闭后,上次选中的项就没有了:
解决方法:可以给el-table绑定row-key属性,用来优化 Table 的渲染;type="selection"列绑定:reserve-selection="true",在数据更新之后保留之前选中的数据。
<el-table
ref="multipleTable"
:data="labelList"
border
style="width: 100%"
row-key="labelStockId"
>
<el-table-column
type="selection"
width="55"
align="center"
:reserve-selection="true"
></el-table-column>
</el-table>
row-key属性的值为data数据里的唯一值,也可以是函数 :row-key = "getRowKey"
getRowKey(row) {
return row.labelStockId;
}
2. 上面这种方法在只能记录一次表格的选中情况,如果涉及到多个地方使用了上述相同的表格组件,而每个表格的选中情况不相同,则上述方法不再适合:
解决方法:在获取表格数据的时候,使用组件提供的 toggleRowSelection 方法,切换某一行的选中状态,进行多选框的回显,此方法也可实现切换分页时的回显,需要注意的是 使用 toggleRowSelection 方法 必须使用绑定table的原有数据,不可使用传入的参数,否则方法会无效
outstockLablestock(param).then((res) => {
if (res.data.code === 10000) {
this.labelList = (res && res.data && res.data.data.records) || [];
this.total = res.data.data.total;
// 已选中项回显
this.$nextTick(() => {
const selectList = this.labelList.filter(({ labelId }) => {
return this.optionLabelList.some(
(val) => labelId === val.labelId
);
});
selectList.forEach((item) => {
this.$refs.multipleTable.toggleRowSelection(item, true);
});
});
}
});
3. 表格数据改变,但页面数据不更新,使用 this.$forceUpdate() 也不管用:
解决方法:给 el-table 绑定 key 值,在需要更新时 this.num++,触发 el-table 的重新渲染
<el-table
:data="outstockTableData"
border
style="width: 100%"
:key="num"
>
</el-table>
4.如何不走接口,实现el-table 的分页效果:
解决方法:使用 slice 方法对当前页要展示的数据进行截取
<el-table
ref="multipleTable"
:data="
labelList.slice(
(optionPage - 1) * optionSize,
optionPage * optionSize
)
"
border
style="width: 100%"
>
</el-table>
<el-pagination
:current-page="optionPage"
:page-size="optionSize"
layout="total, sizes, prev, pager, next"
:total="optionTotal"
:pager-count="5"
/>
5.在布局时,如果给每一列都加了固定的宽,而table的宽度为100%,会出现多余的线条影响页面效果:
解决方法:给 el-tale 加上一个width,使它的宽度为所有列宽的和
.el-table {
width: 302px !important;
}
//多的2px为滚动条宽度
6.如何实现双击table单元格,复制单元格内容
安装复制插件 clipboard-polyfill
npm i clipboard-polyfill
import { writeText } from "clipboard-polyfill/text" // 复制
<el-table
:data="fileListData"
border
style="width: 100%"
@cell-dblclick="cellDblclick"
>
</el-table>
/* 当某个单元格被双击击时会触发该事件(复制内容) */
cellDblclick(row, column) {
console.log(row, column);
let prop = column.property
if (!prop) {
return
}
let content = row[prop]
if ([undefined, null, ''].includes(content) || typeof(content) === 'object') {
return
}
writeText(content) // 复制
Message.closeAll()
Message.success(`复制成功:${content}`)
},
7.如何实现tabel表格的单选
<el-table
:data="fileListData"
ref="multipleTable"
@selection-change="handleSelectionChange"
>
</el-table>
let selectRowObj = reactive({
list:[]
})
const handleSelectionChange = (rows) => {
if (rows.length > 1) {
multipleTable.value.clearSelection();
multipleTable.value.toggleRowSelection(rows.pop());
} else {
selectRowObj.list = rows.pop();
}
};
8.设置树形结构table只可展开一级,其他闭合
<el-table
:data="tableData"
row-key="id"
:tree-props="treeProps"
:data="fileListData"
:expand-row-keys="expands"
@expand-change="toggleRowExpansion"
>
</el-table>
let treeProps = {
hasChildren: "hasChildren",
children: "children"
};
const expands = ref([])
const toggleRowExpansion = (row, expandedRows) => {
console.log(row, expandedRows);
// 点击先清空数组 全部合起来
expands.value = []
// 点击之前 expandedRows 分为 true / false
if (expandedRows) {
// ture 代表展开 false代表闭合
// 找到父节点一起放进数组
expands.value.push(String(row.id))
expands.value.push(String(row.parent_id))
} else {
// false 代表要合起来,
//如果是根节点,根节点的pid不在列表所以无效,就算放进数组也没用
// 如果是叶子节点 把pid 放进数组 代表只合起自己,当前节点的根节点还是会展开
expands.value.push(String(row.parent_id))
}
}