90设计网站怎么样,iis wordpress index.php,兼职做网站,公司建立网站的好处效果 思路
自定义模板当点击某个行复选框时#xff0c;其所有后代复选框都要同步状态#xff0c;且其直系父辈状态需要根据所点击复选框的状态来修正点击全选复选框时#xff0c;批量同步所有行内复选框状态
代码
非封装组件#xff0c;按需自行改写 确保引入element-ui…效果 思路
自定义模板当点击某个行复选框时其所有后代复选框都要同步状态且其直系父辈状态需要根据所点击复选框的状态来修正点击全选复选框时批量同步所有行内复选框状态
代码
非封装组件按需自行改写 确保引入element-ui 的情况下直接新增如下代码的vue组件即可部分数据检索和批处理存在优化空间。
templatedivaside树型表格复选框/asideel-tablereftable:datarowsrow-keyidborderdefault-expand-all!--自定义复选框-start--el-table-column label全选 width160 aligncentertemplate slotheader slot-scopescopeel-checkbox :indeterminateisIndeterminate v-modelisFullChecked changecheckAllChange//templatetemplate slot-scope{row}el-checkbox :indeterminaterow.isIndeterminate :valuerow.checked changecheckRowChange(row)//template/el-table-column!--自定义复选框-end--el-table-column label子节点部分选取 propisIndeterminate width160 aligncentertemplate slot-scope{row}{{row.isIndeterminate?true:false}}/template/el-table-columnel-table-column label是否选中 propchecked width160 aligncentertemplate slot-scope{row}{{row.checked?true:false}}/template/el-table-columnel-table-column typeindex label序号 width60 aligncenter/el-table-columnel-table-column propid labelID aligncenter width160/el-table-columnel-table-column propparentId labelPARENT_ID aligncenter width160/el-table-column/el-tablebr!--如果涉及分页,新的数据会直接覆盖掉原有的,只需要额外的操作将全选复选框重置即可--el-button clickgetResource刷新数据/el-button/div
/templatescript
export default {name: tree-table-checkbox,data() {return {rows: [],isFullChecked: false,isIndeterminate: false,}},created() {this.getResource()},watch: {// 直接监听rows数据是否变化,重置全选框rows() {this.isFullChecked falsethis.isIndeterminate false}},methods: {/** 同步更新子节点复选框* isIndeterminate false checked false 表现为空 全部子节点取消勾选* isIndeterminate false checked true 表现为选中 全部子节点勾选* isIndeterminate true 表现为半选(操作其子节点的结果),因此子节点要改为选中 不修改子节点状态 点击为全选中* */deepSetChildren(data) {const { isIndeterminate, checked } dataconst recursionSetChecked (arr, checked) {if (arr arr.length 0) {arr.forEach(d {d.checked checkedd.isIndeterminate falserecursionSetChecked(d.children, checked)})}}recursionSetChecked(data.children, isIndeterminate ? true : checked)},/***根据checked自定义加载*1)判断当前checked。* checked true 当前节点 变为false 下级所有级别节点变为false* checked false 当前节点 变为true 下级所有级别节点变为true*2)双向递归刷新所有节点checked*/checkRowChange(data) {const vm this;const { rows } vm/** tbody中的复选框不使用v-model否则会出现 checkedtrue 需要点两次才会变成false的情况* 可参考 https://blog.csdn.net/weixin_41597344/article/details/103196688* 因此这里再事件监听中手动取反*/data.checked !data.checked//鼠标勾选/取消勾选 需要同步子节点状态和操作的行一致vm.deepSetChildren(data)/** 递归修正* 再整个数据树中,操作节点的下层子分支状态由操作节点确定,而其父辈节点需要根据操作节点的情况进行判断。* 这里没有单独找出操作节点的分支直接处理了整棵树* returns {*}*/const recursion (node) {if (node.children node.children.length 0) {// 向下递归node.children.forEach(d recursion(d))// 获取子节点的情况(有多少勾选的,有多少半选的)const sumChecked node.children.filter(d d.checked).lengthnode.isIndeterminate sumChecked 0 sumChecked node.children.lengthif (node.children.some(d d.isIndeterminate)) {node.isIndeterminate true}node.checked sumChecked ! 0} else {// 没有子节点的由自身确定状态node.isIndeterminate false}return node}rows.forEach(d {recursion(d)})//因为全选按钮不在整个数据树中需要单独判断数据树一层的情况//如果全部勾选则 【全选框】 勾选if (rows.every(d d.checked)) {vm.isFullChecked true}//如果全部勾选则 【全选框】 取消勾选if (rows.every(d !d.checked)) {vm.isFullChecked false}//如果是存在半选或存在未选且有已选或半选 则 【全选框】半选vm.isIndeterminate rows.some(d d.isIndeterminate) ? true : rows.some(d !d.checked) rows.some(d d.checked)},/*** 初始化时设定isFullChecked false,每次点击取反* if isFullChecked true*设置所有节点checked true* if isFullChecked false* 设置所有节点checked false*/checkAllChange() {const vm thisconst { rows } vmconst recursionSetChecked (item, checked) {item.checked checkeditem.isIndeterminate falseif (item.children item.children.length 0) {item.children.forEach(d recursionSetChecked(d, checked))}}this.isIndeterminate falserows.forEach(d recursionSetChecked(d, vm.isFullChecked))},//获取列表基础数据getResource() {const vm this//测试用数据只有一个根节点 0 方便构建测试用数据树const data [{ id: 1, parentId: 0 },{ id: 2, parentId: 0 },{ id: 2-0, parentId: 2 },{ id: 1-0, parentId: 1 },{ id: 1-1, parentId: 1 },{ id: 1-1-0, parentId: 1-1 },{ id: 1-1-0-0, parentId: 1-1-0 },{ id: 1-1-0-1, parentId: 1-1-0 },{ id: 1-2, parentId: 1 },{ id: 1-2-0, parentId: 1-2 },{ id: 1-2-1, parentId: 1-2 },]//1) 简单处理数据用于自定义渲染; checked: indeterminate:data.forEach(d {d.checked false //是否选中d.isIndeterminate false//是否是半选状态})vm.rows vm.makeTree(data, id, parentId, 0)},/*** 构建树,与复选逻辑无关* param data* param idMark* param pIdMark* param rootId* returns {*}*/makeTree(data, idMark, pIdMark, rootId) {//转化为字典id为键值并添加根节点对象let nodeDict {};(nodeDict[rootId] { children: [] })[idMark] rootId;data.forEach(n {(nodeDict[n[idMark]] n).children [];});data.forEach(function (d) {let parentNode nodeDict[d[pIdMark]];if (parentNode) {parentNode.children.push(d);}});return nodeDict[rootId].children;}}
}
/scriptstyle scoped/style
补充
复选逻辑完全可以抽离之前一直没时间所以补充下
/*
* 层级树组递归
* */
Object.defineProperty(Array.prototype, recursive, {enumerable: false,value: function(handler) {const vm thisconst recursive (current, parent, index, siblings, path) {if (handler({ current, parent, index, siblings, path })) return trueif (current.children current.children.length 0) {const nextPath [...path, current.id]for (let i 0, child; (child current.children[i]) ! null; i) {if (recursive(child, current, i, current.children, nextPath)) {return true}}}}for (let i 0, child; (child vm[i]) ! null; i) {if (recursive(child, null, i, vm, [])) {return true}}}
})export class CheckManager {rootIdoptions []nodeIterator []nodeMap {}parentMap {}statusMap {}constructor(rootId) {this.rootId rootId ! null ? rootId : Math.random()this.statusMap[0] {checked: false,indeterminate: false}}setData(data) {const vm this, { rootId } vmvm.parentMap {}//添加虚拟根节点vm.options [{ id: rootId, parentId: null, children: data }]//记录节点选中状态let statusMapTemp {}let nodeMapTemp {}let nodeIteratorTemp []vm.options.recursive(({ current, parent }) {vm.parentMap[current.id] parentnodeMapTemp[current.id] currentstatusMapTemp[current.id] { checked: false, indeterminate: false }if (current.id ! rootId) {nodeIteratorTemp.push(current)}})vm.statusMap statusMapTempvm.nodeMap nodeMapTempvm.nodeIterator nodeIteratorTempreturn statusMapTemp}toggle(id) {const vm this, { options, statusMap, parentMap } vmif (id null) {return}let node vm.nodeMap[id]let currStatus statusMap[node.id]let checked currStatus.checked currStatus.indeterminate ? true : !currStatus.checkedcurrStatus.indeterminate false//1)同步子节点状态和本节点一致if (node.children) node.children.recursive(({ current }) {statusMap[current.id] { checked, indeterminate: false }})//2) 向上计算父节点let parent nodewhile ((parent parentMap[parent.id])) {vm.updateNodeStatus(parent)}return statusMap}/*** 如果有子节点则本节点状态由子节点确定*/setStatus(node) {const vm this, { statusMap } vmlet status statusMap[node.id]if (!status) {status statusMap[node.id] {checked: false,indeterminate: false,}}if (node.children node.children.length 0) {node.children.forEach(d vm.setStatus(d))vm.updateNodeStatus(node)} else {// 没有子节点的由自身确定状态node.indeterminate false}}/*** 依据子节点状态更新本节点* param node*/updateNodeStatus(node) {const vm this, { options, statusMap, parentMap } vmlet checkedNum 0, unCheckedNum 0, status statusMap[node.id], hasHalfChecked falsefor (let i 0, item; (item node.children[i]) ! null; i) {//记录子节点不同选中状态的数量statusMap[item.id].checked ? checkedNum : unCheckedNum//有半选子节点或者 既有未选中子节点也有选中子节点 则本节点半选if ((statusMap[item.id].indeterminate) || (checkedNum 0 unCheckedNum 0)) {status.indeterminate truestatus.checked truehasHalfChecked truebreak}}if (!hasHalfChecked) {//子节点全部为选中状态则本节点选中status.indeterminate falsestatus.checked checkedNum 0}}/*** 更新选中状态*/updateStatus() {const vm thisfor (let i 0, node; (node vm.options[i]) ! null; i) {vm.setStatus(node)}return vm.statusMap}/** 节点变化后仅保留末级节点的选中状态且末级节点indeterminate false*/refresh(data) {const vm this, { rootId } vmvm.parentMap {}vm.options [{ id: rootId, parentId: null, children: data }]//重新组织父节点映射vm.options.recursive(({ current, parent }) {vm.parentMap[current.id] parentcurrent.parentId parent?.id})data.forEach(d this.setStatus(d))return this.statusMap}setChecked(statusOps) {const vm this, { statusMap } vm;let prevStatusfor (let i 0, nextStatus; (nextStatus statusOps[i]) ! null; i) {prevStatus statusMap[nextStatus.id]if (nextStatus.checked ! null) {prevStatus.checked nextStatus.checked}}return this.updateStatus()}getChecked() {const vm this, { nodeIterator, statusMap } vm;let result [], statusfor (let i 0, item; (item nodeIterator[i]) ! null; i) {status statusMap[item.id]if (status.checked) {result.push(item.id)}}return result}getCheckedNode() {const vm this, { nodeIterator, statusMap, nodeMap } vm;let result [], statusfor (let i 0, item; (item nodeIterator[i]) ! null; i) {status statusMap[item.id]if (status.checked) {result.push(nodeMap[item.id])}}return result}getHalfChecked() {const vm this, { nodeIterator, statusMap } vm;let result [], statusfor (let i 0, item; (item nodeIterator[i]) ! null; i) {status statusMap[item.id]if (status.checked status.indeterminate true) {result.push(item.id)}}return result}getFullChecked() {const vm this, { nodeIterator, statusMap } vm;let result [], statusfor (let i 0, item; (item nodeIterator[i]) ! null; i) {status statusMap[item.id]if (status.checked status.indeterminate false) {result.push(item.id)}}return result}
}
使用
创建管理类实例 并指明根节点id
let checkManger new CheckManager(0);赋值通过字段 id parentId children 表示父子关系的数据
let data [id:1,parentId:0,children:[id:1,parentId:1,]
]
checkManger.setData(data)获取计算后的 复选框状态集
checkStatusMap checkManger.statusMap渲染复选框并绑定切换事件 el-checkbox :valuecheckStatusMap[row.id].checked :indeterminatecheckStatusMap[row.id].indeterminate changetoggle(row.id)
/el-checkbox更新复选框状态集
toggle(data) {this.checkStatusMap checkManger.toggle(data);
}
