|
|
|
@ -13,12 +13,12 @@
|
|
|
|
|
<p>{{ list.find((item) => item.id === '1').childList.map((item) => item.id) }}</p>
|
|
|
|
|
<ElTable
|
|
|
|
|
v-loading="listLoading"
|
|
|
|
|
sortable
|
|
|
|
|
border
|
|
|
|
|
code="parent"
|
|
|
|
|
:data="list"
|
|
|
|
|
group="test"
|
|
|
|
|
:row-class-name="handleRowClassName"
|
|
|
|
|
sortable
|
|
|
|
|
@row-add="handleRowAdd"
|
|
|
|
|
@row-clone="handleRowClone"
|
|
|
|
|
@row-remove="handleRowRemove"
|
|
|
|
@ -28,12 +28,12 @@
|
|
|
|
|
<template #default="{ row }">
|
|
|
|
|
<ElTable
|
|
|
|
|
v-loading="listLoading"
|
|
|
|
|
sortable
|
|
|
|
|
border
|
|
|
|
|
code="child"
|
|
|
|
|
:data="row.childList || []"
|
|
|
|
|
:group="{ name: 'test', pull: 'clone' }"
|
|
|
|
|
:row-class-name="handleRowClassName"
|
|
|
|
|
sortable
|
|
|
|
|
@row-add="handleChildrenRowAdd"
|
|
|
|
|
@row-clone="handleChildrenRowClone"
|
|
|
|
|
@row-remove="handleChildrenRowRemove"
|
|
|
|
@ -67,7 +67,6 @@
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import { ElMessage } from '@/plugins/element-plus';
|
|
|
|
|
export default defineComponent({
|
|
|
|
|
name: 'SortableTableDemo',
|
|
|
|
|
setup() {
|
|
|
|
@ -160,7 +159,7 @@
|
|
|
|
|
// 排序改变回调 新下标,旧下标,sortablejs事件对象
|
|
|
|
|
const handleRowSort = (newIndex, oldIndex, e) => {
|
|
|
|
|
console.info('sort', e);
|
|
|
|
|
ElMessage.success(`排序从 ${oldIndex} 变成了 ${newIndex} `);
|
|
|
|
|
proxy.$message.success(`排序从 ${oldIndex} 变成了 ${newIndex} `);
|
|
|
|
|
};
|
|
|
|
|
// 从别的列表拖过来的
|
|
|
|
|
const handleRowAdd = (newIndex, oldIndex, tableCode, done, e) => {
|
|
|
|
@ -168,38 +167,38 @@
|
|
|
|
|
if (tableCode === 'child') {
|
|
|
|
|
done(queryState.list.find((item) => item.id === '1').childList[oldIndex]);
|
|
|
|
|
}
|
|
|
|
|
ElMessage.success(`排序从 ${oldIndex} 变成了 ${newIndex} `);
|
|
|
|
|
proxy.$message.success(`排序从 ${oldIndex} 变成了 ${newIndex} `);
|
|
|
|
|
};
|
|
|
|
|
// 拖到别的列表去了
|
|
|
|
|
const handleRowRemove = (newIndex, oldIndex, e) => {
|
|
|
|
|
console.info('remove', e);
|
|
|
|
|
ElMessage.success(`排序从 ${oldIndex} 变成了 ${newIndex} `);
|
|
|
|
|
proxy.$message.success(`排序从 ${oldIndex} 变成了 ${newIndex} `);
|
|
|
|
|
};
|
|
|
|
|
// 复制一份拖到别的列表去了
|
|
|
|
|
const handleRowClone = (newIndex, oldIndex, e) => {
|
|
|
|
|
console.info('clone', e);
|
|
|
|
|
ElMessage.success(`排序从 ${oldIndex} 变成了 ${newIndex} `);
|
|
|
|
|
proxy.$message.success(`排序从 ${oldIndex} 变成了 ${newIndex} `);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/* 子表格操作 */
|
|
|
|
|
const handleChildrenRowSort = (newIndex, oldIndex, e) => {
|
|
|
|
|
console.info('child sort', e);
|
|
|
|
|
ElMessage.success(`排序从 ${oldIndex} 变成了 ${newIndex} `);
|
|
|
|
|
proxy.$message.success(`排序从 ${oldIndex} 变成了 ${newIndex} `);
|
|
|
|
|
};
|
|
|
|
|
const handleChildrenRowAdd = (newIndex, oldIndex, tableCode, done, e) => {
|
|
|
|
|
console.info('child add', e);
|
|
|
|
|
if (tableCode === 'parent') {
|
|
|
|
|
done(queryState.list[oldIndex]);
|
|
|
|
|
}
|
|
|
|
|
ElMessage.success(`排序从 ${oldIndex} 变成了 ${newIndex} `);
|
|
|
|
|
proxy.$message.success(`排序从 ${oldIndex} 变成了 ${newIndex} `);
|
|
|
|
|
};
|
|
|
|
|
const handleChildrenRowRemove = (newIndex, oldIndex, e) => {
|
|
|
|
|
console.info('child remove', e);
|
|
|
|
|
ElMessage.success(`排序从 ${oldIndex} 变成了 ${newIndex} `);
|
|
|
|
|
proxy.$message.success(`排序从 ${oldIndex} 变成了 ${newIndex} `);
|
|
|
|
|
};
|
|
|
|
|
const handleChildrenRowClone = (newIndex, oldIndex, e) => {
|
|
|
|
|
console.info('child clone', e);
|
|
|
|
|
ElMessage.success(`排序从 ${oldIndex} 变成了 ${newIndex} `);
|
|
|
|
|
proxy.$message.success(`排序从 ${oldIndex} 变成了 ${newIndex} `);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|