小工具知识网

当前位置: 首页 > 行业知识 > vue3中实现elementPlus表格选中行的上移下移

行业知识

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怎么连接服务器?