el-table中sort(拖拽排序)的常见方法

Sat, 08 Mar 2025 00:00:00 +0000

el-table中sort的常见方法

const sort = async (newIndex: number, oldIndex: number) => {
    if (newIndex === oldIndex) return;

const newData = [...tableData.value.rows];
const [movedItem] = newData.splice(oldIndex, 1);
newData.splice(newIndex, 0, movedItem);

newData.forEach((item, index) => {
  item.index = index;
});

// Vue3 响应式更新方式
tableData.value = { 
  ...tableData.value, 
  rows: [...newData] // 强制替换整个数组触发更新
};

sortData.value.tag_groups = newData.map(item => ({
  tag_group_id: item.tag_group_id,
  index: item.index
}));

isData .value += 1; // 每次拖拽后更新 key
}

el-select标签存在的数据匹配问题

Sun, 13 Oct 2024 00:00:00 +0000

一使用方法

userList数据循环在列表，下拉框显示的值为userList里面的label字段的值，实际值为对应label的uuid值，如下面例子中输出选中小王的值应该为01

<template>
  <el-select v-model="form">
    <el-option
      v-for="item in userList"
      :key="item.uuid"
      :label="item.username"
      :value="item.uuid"
    />
  </el-select>
</template>

const userList = ref([{
    username:'小王',
    uuid:'01'
}])
const form = ref<any>()

二传值问题（匹配功能）

当我们在子组件进行表单操作的时候，需要从父组件往子组件传相关操作数据的值，若传入form的值是小王，则form在下拉框中显示的值为小王,实际值也为小王，若传入的值为01,则下拉框中显示的值为小王，实际值依旧为01

Element-Plus on 404_@林达

el-table中sort(拖拽排序)的常见方法

el-table中sort的常见方法

el-select标签存在的数据匹配问题

一 使用方法

二 传值问题（匹配功能）

一使用方法

二传值问题（匹配功能）