科技流小说,咸阳seo公司,宁波网站seo公司,织梦网站首页目录在哪里目录 功能介绍
示例
代码
视图部分
逻辑部分
完整代码 功能介绍 本文介绍了如何在Vue.js框架下实现一个树状表格#xff0c;其中支持选择子节点行的上下移动。通过这个功能#xff0c;用户可以方便地改变子节点的顺序。代码示例和详细的实现步骤将展示如何使用Vue.js的相…目录 功能介绍
示例
代码
视图部分
逻辑部分
完整代码 功能介绍 本文介绍了如何在Vue.js框架下实现一个树状表格其中支持选择子节点行的上下移动。通过这个功能用户可以方便地改变子节点的顺序。代码示例和详细的实现步骤将展示如何使用Vue.js的相关特性和组件实现这个功能。通过本文的介绍您可以轻松了解如何在您的Vue.js项目中应用这个功能以满足您的特定需求。
示例 代码
视图部分 实现父节点选择的代码 在上次选中父节点的代码基础上加上操作行生成上下移动的按钮 el-table-column aligncentertemplate slot-scopescope v-if!scope.row.childrenel-button v-show!validateOperate(scope.row, up) sizemini iconel-icon-top plainclickhandleSort(scope.row, up)/el-buttonel-button v-show!validateOperate(scope.row, down) sizemini iconel-icon-bottom plainclickhandleSort(scope.row, down)/el-button/template/el-table-column新增列定义用于显示上移和下移按钮。template 标签中定义了使用 slot-scope 来访问作用域插槽在这个作用域下使用了两个 el-button 元素来展示上移和下移按钮。为了使第一行与最后一行只有下移或上移这里通过绑定 v-show 来控制按钮的显示与隐藏根据 validateOperate() 方法的返回值确定按钮是否可见。click 侦听器则会触发 handleSort() 方法来完成所在行的移动。 逻辑部分
组件数据和选中父节点的代码相同获取tableData后如果没有index则自己遍历加上该属性。 methods对象新增方法
getParent(id) 方法用于获取拥有指定子行 id 的父级行它通过遍历 this.tableData 数组来寻找子行所属的父行。 getParent(id) {let result [];this.tableData.some(item {item.children.some(d {if (d.id id) result item;})});return result;}
validateOperate(row, type) 方法用于根据指定的操作类型上移或下移检查当前行是否可进行该操作。首先判断是否最内层的子树对于上移操作当前行的索引为0时返回true隐藏上移按钮对于下移操作当前行的索引等于自身所处children数组的长度减1时返回true隐藏下移按钮。 validateOperate(row, type) {if (!row.children) {if (type up row.index 0) {return true;}else if (type down) {return this.getParent(row.id).children.length - 1 row.index;}else {return false;}}}
handleSort(row, type) 方法用于处理行的上移和下移操作。它首先获取该行的父级行和父级行的 ID并定义一个标志变量 downFlag。然后通过遍历 parent.children 数组来查找需要进行上移或下移操作的行并进行相应的移动和调整索引的操作。最后更新父级行的子行列表和相关数据。 handleSort(row, type) {let parent this.getParent(row.id);let parentId;let downFlag true;this.tableData.forEach(item {if (item.children parent) parentId item.id;});console.log(parent);parent.children.some(item {if (type up) {if (item.index row.index - 1) {parent.children.splice(row.index, 1);parent.children.splice(item.index, 0, row);parent.children.forEach((child, index) child.index index);this.tableData.forEach(data {if (data.id parentId) data.children parent.children;});}} else if (type down downFlag) {if (item.index row.index 1) {parent.children.splice(row.index, 1);parent.children.splice(item.index, 0, row);parent.children.forEach((child, index) child.index index);this.tableData.forEach(data {if (data.id parentId) data.children parent.children;});downFlag false;}}})}
完整代码
templatedivel-table v-loadingloading :datatableData stylewidth: 100%;margin: 20px; row-keyid borderdefault-expand-all :tree-props{ children: children }el-table-column width60 aligncentertemplate slotheader slot-scopescopeel-checkbox :indeterminateisIndeterminate v-modelisFullChecked changecheckAllChange/el-checkbox/templatetemplate slot-scope{row} v-ifrow.childrenel-checkbox :indeterminaterow.isIndeterminate :valuerow.checked changecheckRowChange(row)/el-checkbox/template/el-table-columnel-table-column propseries label系列 aligncenter/el-table-columnel-table-column propnum label编号 aligncenter/el-table-columnel-table-column propname label名字 aligncenter/el-table-columnel-table-column aligncentertemplate slot-scopescope v-if!scope.row.childrenel-button v-show!validateOperate(scope.row, up) sizemini iconel-icon-top plainclickhandleSort(scope.row, up)/el-buttonel-button v-show!validateOperate(scope.row, down) sizemini iconel-icon-bottom plainclickhandleSort(scope.row, down)/el-button/template/el-table-column/el-table/div
/templatescript
export default {data() {return {isFullChecked: false,isIndeterminate: false,loading: true,tableData: []}},mounted() {this.getList()},watch: {tableData() {this.isFullChecked false;this.isIndeterminate false;}},methods: {getList() {const tableData [{id: 1,series: DDLC,children: [{id: 11,num: 1,name: monika,index: 0,},{id: 12,num: 2,name: nasuki,index: 1,},{id: 13,num: 3,name: sayori,index: 2,},{id: 14,num: 4,name: yuri,index: 3,}]},{id: 2,series: Bloom Into You,children: [{id: 21,num: 11,name: nanami,index: 0,},{id: 22,num: 12,name: yuu,index: 1,}]},];tableData.forEach(item {item.checked false;item.isIndeterminate false;})this.tableData tableData;this.total this.tableData.length;this.loading false;},checkAllChange() {const recursionSetChecked (item, checked) {item.checked checked;item.isIndeterminate false;}this.isIndeterminate false;this.tableData.forEach(item recursionSetChecked(item, this.isFullChecked));},checkRowChange(data) {data.checked !data.checked;const recursion node {if (node.children node.children.length 0)node.isIndeterminate false;return node;};this.tableData.forEach(item recursion(item));if (this.tableData.every(item item.checked)) {this.isFullChecked true;}else if (this.tableData.every(item !item.checked)) {this.isFullChecked false;}this.isIndeterminate this.tableData.some(item item.isIndeterminate)? true: this.tableData.some(item !item.checked) this.tableData.some(item item.checked);},getParent(id) {let result [];this.tableData.some(item {item.children.some(d {if (d.id id) result item;})});return result;},validateOperate(row, type) {if (!row.children) {if (type up row.index 0) {return true;}else if (type down) {return this.getParent(row.id).children.length - 1 row.index;}else {return false;}}},handleSort(row, type) {let parent this.getParent(row.id);let parentId;let downFlag true;this.tableData.forEach(item {if (item.children parent) parentId item.id;});console.log(parent);parent.children.some(item {if (type up) {if (item.index row.index - 1) {parent.children.splice(row.index, 1);parent.children.splice(item.index, 0, row);parent.children.forEach((child, index) child.index index);this.tableData.forEach(data {if (data.id parentId) data.children parent.children;});}} else if (type down downFlag) {if (item.index row.index 1) {parent.children.splice(row.index, 1);parent.children.splice(item.index, 0, row);parent.children.forEach((child, index) child.index index);this.tableData.forEach(data {if (data.id parentId) data.children parent.children;});downFlag false;}}})}}
}
/script
