ant 树形表格的增删

最近用ant 的树表格做功能，实现了树表格的增删改查。

首先来看需求。树表格最多五层，可以编辑。渲染后台传过来的数据，也可以新增树，同级别，或者子级。

一开始因为新增的子或者同级别没有固定的ID，然后树表格要有一个唯一的rowkey。这里不能用index,父级的index从0开始增加，子级别也是。所以开始要构造一个唯一的key.

首先给每个元素增加key,类似'0','0_0','0_0_0'这种最多五级。注意这些参数不能单纯的想做index,因为后面删除功能可能会删掉‘0_0’,'0_1'就变成了子集第一个。

给所有元素添加唯一key

let loopArr = [{name: "lisi",age: 12,children: [{name: "wangwu",age: 13,children: [{age: 14,name: "zhaoliu",},],},],},
];
function addKey(loopArr, currentStep = 0, pId = 0) {const configs = [];console.log(loopArr, currentStep, pId, "元素循环次数");loopArr.forEach((item, index) => {if (!item.children || item.children.length < 1) {const t = {...item,key: currentStep == 0 ? index.toString() : pId + "_" + index,};t.children = undefined;configs.push(t);}if (item.children && item.children.length > 0) {const parent = {...item,key: currentStep == 0 ? index.toString() : pId + "_" + index,};parent.children = addKey(item.children, currentStep + 1, parent.key);configs.push(parent);}});console.log(configs, "构造数据");return configs;}addKey(loopArr, 0, 0);

最后成功实现给数组的所有元素（子元素添加了key） 

过两天会继续结合项目开始写增加和删除

  const  dataSource = reactive({ list: [] })dataSource.list = [{name: "lisi",age: 12,children: [{name: "wangwu",age: 13,children: [{age: 14,name: "zhaoliu",},],},],},{name: '第二行',age: 15,children: null}];const columns = [{title: '展开',width: 75},{title: 'id',width: 75,dataIndex: 'key'},{title: '姓名',dataIndex: 'name',width: 175,},{title: '年龄',dataIndex: 'age',width: 75,slots: {customRender: 'age'}},{title: '描述',dataIndex: 'desc',slots: {customRender: 'desc'}},{title: '操作',dataIndex: 'action',width: 275,align: 'center',slots: {customRender: 'action'}},]

我的假数据列表。

添加子元素。

很无脑的判断层数增加子元素，要多少层写多少个。

比如一级点击的行的key(上面一开始初始化已经添加了所有的唯一key)'0',他新增的子级应该是‘0—_0’,'0_1',这样，取最后一位，然后判断他children列表里的最大值，最大的+1这样就不会重复。添加子节点。

key:record.key + '_' + (child.length == 0 ? '0' :
          (Math.max.apply(Math, child.map((o: any) => {
            let ind = o.key.lastIndexOf('_') + 1;
            return o.key.slice(ind)
          })
          )
          ) + 1
        )

 function addson(record: any) {//添加子集let keyArr = record.key.split('_')let child = []let arr = dataSource.listif (keyArr.length === 1) {let ind1 = arr.findIndex((it1: any) => keyArr[0] == it1.key)!arr[ind1].children ? arr[ind1].children = [] : ''child = arr[ind1].children}if (keyArr.length === 2) {let ind1 = arr.findIndex((it1: any) => keyArr[0] == it1.key)let arr1Chlld = arr[ind1].childrenlet ind2 = arr1Chlld.findIndex((it2: any) => record.key == it2.key)if (!arr1Chlld[ind2].children) {arr1Chlld[ind2].children = []}child = arr1Chlld[ind2].children}let item = {isNullable: '',children: null,key: record.key + '_' + (child.length == 0 ? '0' :(Math.max.apply(Math, child.map((o: any) => {let ind = o.key.lastIndexOf('_') + 1;return o.key.slice(ind)}))) + 1)}child.push(item)}

删除选中元素

根据key'0_0_0'去删除。就是截取第一位‘0'的位置，然后第二位‘0_0’的位置，最后找‘0_0_0’的位置

 function delItem(record: any) {console.log(dataSource, record)let keyArr = record.key.split('_');let len = keyArr.length;let list = dataSource.listif (len == 1) {let ind1 = list.findIndex(it1 => it1.key == record.key)list.splice(ind1, 1)}if (len == 2) {let ind1 = list.findIndex(it1 => it1.key == keyArr[0])//拿第一层的indexlet ind1Child = list[ind1].children//第一层的children列表let ind2 = ind1Child.findIndex(it2 => it2.key == record.key)//拿第二层的位置ind1Child.splice(ind2, 1)}if (len == 3) {let ind1 = list.findIndex(it1 => it1.key == keyArr[0])let ind1Child = list[ind1].childrenlet ind2 = ind1Child.findIndex(it2 => it2.key == (keyArr[0] + '_' + keyArr[1]))let ind2Child = ind1Child[ind2].childrenlet ind3 = ind2Child.findIndex(it2 => it2.key == record.key)ind2Child.splice(ind3, 1)}}

最后就通过splice()方法在表格中删除。

因为这个是做列表input 保存。所以需要前端来做增删，形成表格之后返回给后台。

到这里增删就完成了，过几天更新复制功能。

复制功能

更新下复制功能

复制功能的逻辑复杂一点。复制一个元素，

确定他的层级，如第一级；

克隆他以及他的子元素，用深度克隆递归，

key值需要取最大的+1，避免重复。

默认调用copyItem

 function copyItem(record: any) {let keyArr = record.key.split('_');const len = keyArr.length;const copyItem = deepClone(record, 0)const list = dataSource.list//console.log(list, copyItem, 'copy')if (len == 1) {let ind1 = list.findIndex((it1: { key: any; }) => it1.key == record.key)list.splice(ind1 + 1, 0, copyItem)}if (len == 2) {let ind1 = list.findIndex(it1 => it1.key == keyArr[0])//拿第一层的indexlet ind1Child = list[ind1].children//第一层的children列表let ind2 = ind1Child.findIndex(it2 => it2.key == record.key)//拿第二层的位置ind1Child.splice(ind2 + 1, 0, copyItem)}if (len == 3) {let ind1 = list.findIndex(it1 => it1.key == keyArr[0])//拿第一层的indexlet ind1Child = list[ind1].children//第一层的children列表let ind2 = ind1Child.findIndex(it2 => it2.key == keyArr[0] + '_' + keyArr[1])//拿第二层的位置let ind3 = ind1Child[ind2].children.findIndex(it3 => it3.key == record.key)//拿第三层的位置ind1Child[ind2].children.splice(ind3 + 1, 0, copyItem)}}const firstKey = ref('')function deepClone(obj: any, num: number) {if ((typeof obj) !== 'object' && typeof obj !== "function") {return obj}if (obj === null) {return obj}console.log('obj', obj, '循环次数', num)if (num == 0) firstKey.value = obj.keyvar o = Array.isArray(obj) ? [] : {};for (let i in obj) {if (obj.hasOwnProperty(i)) {if (i == 'key') {o[i] = changeKey(obj[i])} else {o[i] = typeof obj[i] === 'object' ? deepClone(obj[i], num + 1) : obj[i]}}}return o}function maxKey(arr: any) {return Math.max.apply(Math, arr.map((item: any) => {let ind = item.key.lastIndexOf('_') + 1return item.key.slice(ind)})) + 1 + ''}function changeKey(key: any) {let arr = key.split('_');const len = arr.length;const firstLen = firstKey.value.split('_').lengthconst list = dataSource.listif (firstLen == 1) {firstKey.value = maxKey(list)if (len == 1) {return firstKey.value}if (len == 2) {return firstKey.value + '_' + arr[1]}if (len == 3) {return firstKey.value + '_' + arr[1] + '_' + arr[2]}} else if (firstLen == 2) {let ind1 = list.findIndex(it1 => it1.key == arr[0])let key2 = maxKey(list[ind1].children)if (len == 2) {return arr[0] + '_' + key2}if (len == 3) {return arr[0] + '_' + key2 + '_' + arr[2]}} else if (firstLen == 3) {let ind1 = list.findIndex(it1 => it1.key == arr[0])let ind2 = list[ind1].children.findIndex(it2 => it2.key == arr[0] + "_" + arr[1])let key3 = maxKey(list[ind1].children[ind2].children)if (len === 3) {return arr[0] + '_' + arr[1] + '_' + key3}}}

最后实现复制功能

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！