先看效果:
實現步驟:
1、給el-table添加current-change事件、高亮屬性及ref屬性
?
2、給上移下移按鈕添加事件
// 定義當前選中的行參數
const currentRow = ref<any>(null);
// 定義表格的ref
const 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);}}
};