|
|
@ -0,0 +1,218 @@
|
|
|
|
|
|
|
|
<template>
|
|
|
|
|
|
|
|
<div class="flaw-category-container">
|
|
|
|
|
|
|
|
<ul>
|
|
|
|
|
|
|
|
<li>设置group属性实现多个拖拽表格互相拖拽</li>
|
|
|
|
|
|
|
|
<li>group需要配合code属性判断数据是从哪里拖过来的</li>
|
|
|
|
|
|
|
|
<li>设置row-class-name给某些行加上filter属性指定的class ( 默认ignore-drag-sort ) 实现禁止拖拽</li>
|
|
|
|
|
|
|
|
<li>row-sort | row-remove | row-clone 事件入参: 新下标、旧下标、事件对象</li>
|
|
|
|
|
|
|
|
<li>row-add事件入参: 新下标、旧下标、来源表格code、来源数据provider函数、事件对象</li>
|
|
|
|
|
|
|
|
<li>单表格拖拽触发 row-add</li>
|
|
|
|
|
|
|
|
<li>多表格拖拽来源表格触发 row-remove 或者 row-clone ,目的表单触发 row-add</li>
|
|
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
<p>{{ list.map((item) => item.id) }}</p>
|
|
|
|
|
|
|
|
<p>{{ list.find((item) => item.id === '1').childList.map((item) => item.id) }}</p>
|
|
|
|
|
|
|
|
<SortableTable
|
|
|
|
|
|
|
|
v-loading="listLoading"
|
|
|
|
|
|
|
|
border
|
|
|
|
|
|
|
|
code="parent"
|
|
|
|
|
|
|
|
:data="list"
|
|
|
|
|
|
|
|
group="test"
|
|
|
|
|
|
|
|
:row-class-name="handleRowClassName"
|
|
|
|
|
|
|
|
@row-add="handleRowAdd"
|
|
|
|
|
|
|
|
@row-clone="handleRowClone"
|
|
|
|
|
|
|
|
@row-remove="handleRowRemove"
|
|
|
|
|
|
|
|
@row-sort="handleRowSort"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<el-table-column label="展开" type="expand" width="60">
|
|
|
|
|
|
|
|
<template #default="{ row }">
|
|
|
|
|
|
|
|
<SortableTable
|
|
|
|
|
|
|
|
v-loading="listLoading"
|
|
|
|
|
|
|
|
border
|
|
|
|
|
|
|
|
code="child"
|
|
|
|
|
|
|
|
:data="row.childList || []"
|
|
|
|
|
|
|
|
:group="{ name: 'test', pull: 'clone' }"
|
|
|
|
|
|
|
|
:row-class-name="handleRowClassName"
|
|
|
|
|
|
|
|
@row-add="handleChildrenRowAdd"
|
|
|
|
|
|
|
|
@row-clone="handleChildrenRowClone"
|
|
|
|
|
|
|
|
@row-remove="handleChildrenRowRemove"
|
|
|
|
|
|
|
|
@row-sort="handleChildrenRowSort"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<el-table-column align="center" label="排序" prop="sort" width="60" />
|
|
|
|
|
|
|
|
<el-table-column align="center" label="ID" prop="id" show-overflow-tooltip />
|
|
|
|
|
|
|
|
<el-table-column align="center" label="字段1" prop="key1" show-overflow-tooltip />
|
|
|
|
|
|
|
|
<el-table-column align="center" label="字段2" prop="key2" show-overflow-tooltip />
|
|
|
|
|
|
|
|
<el-table-column align="center" label="字段3" prop="key3" show-overflow-tooltip />
|
|
|
|
|
|
|
|
<el-table-column align="center" label="字段4" prop="key4" show-overflow-tooltip />
|
|
|
|
|
|
|
|
<el-table-column align="center" label="字段5" prop="key5" show-overflow-tooltip />
|
|
|
|
|
|
|
|
<template #empty>
|
|
|
|
|
|
|
|
<el-empty class="vab-data-empty" description="暂无数据" />
|
|
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
</SortableTable>
|
|
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
|
|
<el-table-column align="center" label="排序" prop="sort" width="60" />
|
|
|
|
|
|
|
|
<el-table-column align="center" label="ID" prop="id" show-overflow-tooltip />
|
|
|
|
|
|
|
|
<el-table-column align="center" label="字段1" prop="key1" show-overflow-tooltip />
|
|
|
|
|
|
|
|
<el-table-column align="center" label="字段2" prop="key2" show-overflow-tooltip />
|
|
|
|
|
|
|
|
<el-table-column align="center" label="字段3" prop="key3" show-overflow-tooltip />
|
|
|
|
|
|
|
|
<el-table-column align="center" label="字段4" prop="key4" show-overflow-tooltip />
|
|
|
|
|
|
|
|
<el-table-column align="center" label="字段5" prop="key5" show-overflow-tooltip />
|
|
|
|
|
|
|
|
<template #empty>
|
|
|
|
|
|
|
|
<el-empty class="vab-data-empty" description="暂无数据" />
|
|
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
</SortableTable>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
import { ElMessage } from '@/plugins/element-plus';
|
|
|
|
|
|
|
|
export default defineComponent({
|
|
|
|
|
|
|
|
name: 'SortableTableDemo',
|
|
|
|
|
|
|
|
setup() {
|
|
|
|
|
|
|
|
/* 通用 */
|
|
|
|
|
|
|
|
// proxy类似于vue2的this指向
|
|
|
|
|
|
|
|
const { proxy } = getCurrentInstance();
|
|
|
|
|
|
|
|
const commonState = reactive({
|
|
|
|
|
|
|
|
// 分页布局
|
|
|
|
|
|
|
|
layout: 'total, sizes, prev, pager, next, jumper',
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 查询 */
|
|
|
|
|
|
|
|
const queryState = reactive({
|
|
|
|
|
|
|
|
// 加载状态
|
|
|
|
|
|
|
|
listLoading: false,
|
|
|
|
|
|
|
|
// 列表数据
|
|
|
|
|
|
|
|
list: [
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
id: '1',
|
|
|
|
|
|
|
|
sort: 1,
|
|
|
|
|
|
|
|
key1: '1-1',
|
|
|
|
|
|
|
|
key2: '1-2',
|
|
|
|
|
|
|
|
key3: '1-3',
|
|
|
|
|
|
|
|
key4: '1-4',
|
|
|
|
|
|
|
|
key5: '1-5',
|
|
|
|
|
|
|
|
childList: [
|
|
|
|
|
|
|
|
{ id: '1-1', sort: 1, key1: '1-1', key2: '1-2', key3: '1-3', key4: '1-4', key5: '1-5' },
|
|
|
|
|
|
|
|
{ id: '1-2', sort: 2, key1: '2-1', key2: '2-2', key3: '2-3', key4: '2-4', key5: '2-5' },
|
|
|
|
|
|
|
|
{ id: '1-3', sort: 3, key1: '3-1', key2: '3-2', key3: '3-3', key4: '3-4', key5: '3-5' },
|
|
|
|
|
|
|
|
{ id: '1-4', sort: 4, key1: '4-1', key2: '4-2', key3: '4-3', key4: '4-4', key5: '4-5' },
|
|
|
|
|
|
|
|
{ id: '1-5', sort: 5, key1: '5-1', key2: '5-2', key3: '5-3', key4: '5-4', key5: '5-5' },
|
|
|
|
|
|
|
|
],
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
id: '2',
|
|
|
|
|
|
|
|
sort: 2,
|
|
|
|
|
|
|
|
key1: '2-1',
|
|
|
|
|
|
|
|
key2: '2-2',
|
|
|
|
|
|
|
|
key3: '2-3',
|
|
|
|
|
|
|
|
key4: '2-4',
|
|
|
|
|
|
|
|
key5: '2-5',
|
|
|
|
|
|
|
|
childList: [],
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
id: '3',
|
|
|
|
|
|
|
|
sort: 3,
|
|
|
|
|
|
|
|
key1: '3-1',
|
|
|
|
|
|
|
|
key2: '3-2',
|
|
|
|
|
|
|
|
key3: '3-3',
|
|
|
|
|
|
|
|
key4: '3-4',
|
|
|
|
|
|
|
|
key5: '3-5',
|
|
|
|
|
|
|
|
childList: [],
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
id: '4',
|
|
|
|
|
|
|
|
sort: 4,
|
|
|
|
|
|
|
|
key1: '4-1',
|
|
|
|
|
|
|
|
key2: '4-2',
|
|
|
|
|
|
|
|
key3: '4-3',
|
|
|
|
|
|
|
|
key4: '4-4',
|
|
|
|
|
|
|
|
key5: '4-5',
|
|
|
|
|
|
|
|
childList: [],
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
id: '5',
|
|
|
|
|
|
|
|
sort: 5,
|
|
|
|
|
|
|
|
key1: '5-1',
|
|
|
|
|
|
|
|
key2: '5-2',
|
|
|
|
|
|
|
|
key3: '5-3',
|
|
|
|
|
|
|
|
key4: '5-4',
|
|
|
|
|
|
|
|
key5: '5-5',
|
|
|
|
|
|
|
|
childList: [],
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
],
|
|
|
|
|
|
|
|
// 数据总量
|
|
|
|
|
|
|
|
total: 0,
|
|
|
|
|
|
|
|
// 查询条件
|
|
|
|
|
|
|
|
queryForm: {
|
|
|
|
|
|
|
|
pageIndex: 1,
|
|
|
|
|
|
|
|
length: 10,
|
|
|
|
|
|
|
|
name: null,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 操作 */
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 第三行不允许拖动
|
|
|
|
|
|
|
|
const handleRowClassName = ({ rowIndex }) => (rowIndex === 2 ? 'ignore-drag-sort' : '');
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 排序改变回调 新下标,旧下标,sortablejs事件对象
|
|
|
|
|
|
|
|
const handleRowSort = (newIndex, oldIndex, e) => {
|
|
|
|
|
|
|
|
console.info('sort', e);
|
|
|
|
|
|
|
|
ElMessage.success(`排序从 ${oldIndex} 变成了 ${newIndex} `);
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
// 从别的列表拖过来的
|
|
|
|
|
|
|
|
const handleRowAdd = (newIndex, oldIndex, tableCode, done, e) => {
|
|
|
|
|
|
|
|
console.info('add', e);
|
|
|
|
|
|
|
|
if (tableCode === 'child') {
|
|
|
|
|
|
|
|
done(queryState.list.find((item) => item.id === '1').childList[oldIndex]);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
ElMessage.success(`排序从 ${oldIndex} 变成了 ${newIndex} `);
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
// 拖到别的列表去了
|
|
|
|
|
|
|
|
const handleRowRemove = (newIndex, oldIndex, e) => {
|
|
|
|
|
|
|
|
console.info('remove', e);
|
|
|
|
|
|
|
|
ElMessage.success(`排序从 ${oldIndex} 变成了 ${newIndex} `);
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
// 复制一份拖到别的列表去了
|
|
|
|
|
|
|
|
const handleRowClone = (newIndex, oldIndex, e) => {
|
|
|
|
|
|
|
|
console.info('clone', e);
|
|
|
|
|
|
|
|
ElMessage.success(`排序从 ${oldIndex} 变成了 ${newIndex} `);
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 子表格操作 */
|
|
|
|
|
|
|
|
const handleChildrenRowSort = (newIndex, oldIndex, e) => {
|
|
|
|
|
|
|
|
console.info('child sort', e);
|
|
|
|
|
|
|
|
ElMessage.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} `);
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
const handleChildrenRowRemove = (newIndex, oldIndex, e) => {
|
|
|
|
|
|
|
|
console.info('child remove', e);
|
|
|
|
|
|
|
|
ElMessage.success(`排序从 ${oldIndex} 变成了 ${newIndex} `);
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
const handleChildrenRowClone = (newIndex, oldIndex, e) => {
|
|
|
|
|
|
|
|
console.info('child clone', e);
|
|
|
|
|
|
|
|
ElMessage.success(`排序从 ${oldIndex} 变成了 ${newIndex} `);
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
|
|
|
...toRefs(commonState),
|
|
|
|
|
|
|
|
...toRefs(queryState),
|
|
|
|
|
|
|
|
handleRowClassName,
|
|
|
|
|
|
|
|
handleRowSort,
|
|
|
|
|
|
|
|
handleRowAdd,
|
|
|
|
|
|
|
|
handleRowRemove,
|
|
|
|
|
|
|
|
handleRowClone,
|
|
|
|
|
|
|
|
handleChildrenRowSort,
|
|
|
|
|
|
|
|
handleChildrenRowAdd,
|
|
|
|
|
|
|
|
handleChildrenRowRemove,
|
|
|
|
|
|
|
|
handleChildrenRowClone,
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
</script>
|