一.数据结构

1.使用一维数组模式

const tableData = ref([ 
    { id: 10000, parentId: null, name: 'Test1', type: 'mp3', size: 1024, date: '2020-08-01' }, 
    { id: 10050, parentId: null, name: 'Test2', type: 'mp4', size: 0, date: '2021-04-01' }, 
    { id: 24300, parentId: 10050, name: 'Test3', type: 'avi', size: 1024, date: '2020-03-01' }, 
    { id: 20045, parentId: 24300, name: 'Test4', type: 'html', size: 600, date: '2021-04-01' }, 
    { id: 10053, parentId: 24300, name: 'Test5', type: 'avi', size: 0, date: '2021-04-01' }, 
    { id: 24330, parentId: 10053, name: 'Test6', type: 'txt', size: 25, date: '2021-10-01' }, 
    { id: 21011, parentId: 10053, name: 'Test7', type: 'pdf', size: 512, date: '2020-01-01' },
    { id: 22200, parentId: 10053, name: 'Test8', type: 'js', size: 1024, date: '2021-06-01' }, 
    { id: 23666, parentId: null, name: 'Test9', type: 'xlsx', size: 2048, date: '2020-11-01' } 
])

优点：可以直接使用一维数组显示树结构，无需开发者构建

缺点：对树节点操作时无法直接使用tableData操作

2.使用数结构模式

const tableData = ref([
    { id: 1000, name: 'test abc1', type: 'mp3', size: 1024, date: '2020-08-01' },
    {
        id: 1005,
        name: 'Test2',
        type: 'mp4',
        size: 0,
        date: '2021-04-01',
        children: [
            { id: 24300, name: 'Test3', type: 'avi', size: 1024, date: '2020-03-01' },
            { id: 20045, name: 'test abc4', type: 'html', size: 600, date: '2021-04-01' },
            {
                id: 10053,
                name: 'test abc96',
                type: 'avi',
                size: 0,
                date: '2021-04-01',
                children: [
                    { id: 24330, name: 'test abc5', type: 'txt', size: 25, date: '2021-10-01' },
                    { id: 21011, name: 'Test6', type: 'pdf', size: 512, date: '2020-01-01' },
                    { id: 22200, name: 'Test7', type: 'js', size: 1024, date: '2021-06-01' }
                ]
            }
        ]
    },
    { id: 23666, name: 'Test8', type: 'xlsx', size: 2048, date: '2020-11-01' },
    { id: 24555, name: 'test abc9', type: 'avi', size: 224, date: '2020-10-01' }
])

优点：可以直接操作树结构更新视图，方便增删改查

缺点：需要构建树结构数据，并且指定 node 是否叶子结点，没有 children 属性或者 hasChildField 确定是否显示展开按钮

二.行上下移动操作

针对树结构数据，上移和下移直接通过修改 tableData 解决

// 上移
tableData.value.splice(index, 1)
tableData.value.splice(index - 1, 0, row)

// 下移
tableData.value.splice(index, 1)
tableData.value.splice(index + 1, 0, row)

发现这样并不生效，需要 nextTick 之后对数组进行第二次操作才可以

// 上移
tableData.value.splice(index, 1)
nextTick(() => {
    tableData.value.splice(index - 1, 0, row)
})

// 下移
tableData.value.splice(index, 1)
nextTick(() => {
    tableData.value.splice(index + 1, 0, row)
})

当然也可以将splice两次操作为一次操作，交换两条数据位置

tableData.value.splice(index - 1, 2, after, before)

数据其实是更新成功的，但发现也是视图没有响应更新的，需要 relaodData 才行

三.合并单元格

根据API，通过更新 merge-cells 触发合并操作，发现会更新所有节点的行列

// 合并第一行的第二列和第三列
mergeCells.value.push({ row: 0, col: 1, rowspan: 0, colspan: 2 })

这个暂时没有解决，如果有掘友们清楚请告知！！