行业知识
vue3中实现elementPlus表格选中行的上移下移
2026-10-31 12:32:57
来源:互联网转载
先���效果:
实现步骤:
1、给el-table添加current-change事件、高亮属性及ref属性
2、给上移下移按钮添加事件
// 定义当前选中的行参数const currentRow = ref(null);// 定义表格的refconst singleTableRef = ref();// 行选中事件const handleCurrentChange = (val: any) => { currentRow.value = val;};// curcelRight.value.fields是表格数据// 上移事件const upRow = () => { if (currentRow.value) { // 在表格数据中找到当前选中行的索引 let index = curcelRight.value.fields.findIndex((d: any) => d.code == currentRow.value.code); // 索引存在 if (index && index > 0) { // 则利用es6中的解构赋值来实现交换两元素的位置 [curcelRight.value.fields[index], curcelRight.value.fields[index - 1]] = [ curcelRight.value.fields[index - 1], curcelRight.value.fields[index], ]; } // setCurrentRow中传入当前行可以实现不清除选中效果,可以多次上移 singleTableRef.value.setCurrentRow(currentRow.value); }};// 下移事件const downRow = () => { if (currentRow.value) { let index = curcelRight.value.fields.findIndex((d: any) => d.code == currentRow.value.code); if (index + 1 != curcelRight.value.fields.length) { if (index > -1 && curcelRight.value.fields.length > 1) { [curcelRight.value.fields[index], curcelRight.value.fields[index + 1]] = [ curcelRight.value.fields[index + 1], curcelRight.value.fields[index], ]; } singleTableRef.value.setCurrentRow(currentRow.value); } }};
上一篇:幻想帕鲁服务器怎么保存?
下一篇:mac怎么连接服务器?