refactor(tree): 树形组件重构优化暂存
This commit is contained in:
		
							parent
							
								
									aa51c44432
								
							
						
					
					
						commit
						520ac36d24
					
				@ -9,7 +9,7 @@
 | 
			
		||||
      }"
 | 
			
		||||
      :lay-skin="skin"
 | 
			
		||||
    >
 | 
			
		||||
      <span><slot /></span>
 | 
			
		||||
      <span v-if="$slots?.default"><slot /></span>
 | 
			
		||||
      <i class="layui-icon layui-icon-ok" />
 | 
			
		||||
    </div>
 | 
			
		||||
  </span>
 | 
			
		||||
 | 
			
		||||
@ -44,7 +44,7 @@ const emit = defineEmits<TreeNodeEmits>()
 | 
			
		||||
function renderLineShort(node: TreeData) {
 | 
			
		||||
  return (
 | 
			
		||||
    !node.hasNextSibling &&
 | 
			
		||||
    node.parentKey &&
 | 
			
		||||
    node.parentNode &&
 | 
			
		||||
    // 外层最后一个
 | 
			
		||||
    (!node.parentNode.hasNextSibling ||
 | 
			
		||||
      //上一层父级有延伸线
 | 
			
		||||
@ -84,30 +84,31 @@ function setChildrenChecked (checked: boolean, nodes: TreeData[]) {
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
async function setParentChecked (checked: boolean, parent: TreeData) {
 | 
			
		||||
function setParentChecked (checked: boolean, parent: TreeData) {
 | 
			
		||||
  if (!parent) {
 | 
			
		||||
    return
 | 
			
		||||
  }
 | 
			
		||||
  parent.isChecked.value = checked
 | 
			
		||||
  if (parent.parentNode) {
 | 
			
		||||
    await setParentChecked(checked, parent.parentNode)
 | 
			
		||||
    // todo
 | 
			
		||||
    await nextTick()
 | 
			
		||||
  const pChild = parent.children
 | 
			
		||||
  const pChildChecked = pChild.some(c => c.isChecked.value)
 | 
			
		||||
    console.log(pChildChecked)
 | 
			
		||||
  if (pChildChecked) {
 | 
			
		||||
    parent.isChecked.value = true
 | 
			
		||||
  }
 | 
			
		||||
  if (parent.parentNode) {
 | 
			
		||||
    setParentChecked(checked, parent.parentNode)
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
function handleChange(checked: boolean, node: TreeData) {
 | 
			
		||||
  node.isChecked.value = checked
 | 
			
		||||
  // 处理上级
 | 
			
		||||
  if (node.parentNode) {
 | 
			
		||||
    setParentChecked(checked, node.parentNode)
 | 
			
		||||
  }
 | 
			
		||||
  // 处理下级
 | 
			
		||||
  if (node.children) {
 | 
			
		||||
    setChildrenChecked(checked, node.children)
 | 
			
		||||
  }
 | 
			
		||||
  setParentChecked(checked, node.parentNode)
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
function handleIconClick (node: TreeData) {
 | 
			
		||||
@ -141,11 +142,17 @@ function handleIconClick (node: TreeData) {
 | 
			
		||||
        <LayCheckbox
 | 
			
		||||
          v-if="showCheckbox"
 | 
			
		||||
          v-model:checked="node.isChecked.value"
 | 
			
		||||
          :disabled="node.isDisabled.value"
 | 
			
		||||
          skin="primary"
 | 
			
		||||
          @change="({ checked }) => { handleChange(checked, node) }"
 | 
			
		||||
        >
 | 
			
		||||
        </LayCheckbox>
 | 
			
		||||
        <span class="layui-tree-txt">
 | 
			
		||||
        <span
 | 
			
		||||
          :class="{
 | 
			
		||||
            'layui-tree-txt': true,
 | 
			
		||||
            'layui-disabled': node.isDisabled.value,
 | 
			
		||||
          }"
 | 
			
		||||
        >
 | 
			
		||||
          {{ node.title }}
 | 
			
		||||
        </span>
 | 
			
		||||
      </div>
 | 
			
		||||
 | 
			
		||||
@ -1,9 +1,3 @@
 | 
			
		||||
/*
 | 
			
		||||
 * @Date: 2021-10-16 02:50:17
 | 
			
		||||
 * @LastEditors: 落小梅
 | 
			
		||||
 * @LastEditTime: 2021-10-16 13:07:14
 | 
			
		||||
 * @FilePath: \layui-vue\src\module\tree\new-tree\tree.ts
 | 
			
		||||
 */
 | 
			
		||||
import {
 | 
			
		||||
  OriginalTreeData,
 | 
			
		||||
  StringOrNumber,
 | 
			
		||||
@ -61,7 +55,10 @@ function getNode(
 | 
			
		||||
  const nodeDisabled = !!Reflect.get(origin, 'disabled')
 | 
			
		||||
  const nodeIsLeaf = !!Reflect.get(origin, 'spread')
 | 
			
		||||
 | 
			
		||||
  // const parent = nodeMap.get(parentKey)
 | 
			
		||||
  const parent = nodeMap.get(parentKey)
 | 
			
		||||
  if (parent) {
 | 
			
		||||
    console.log(parent.isChecked.value);
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  // console.log((parent && parent.isChecked.value) || checkedKeys.includes(nodeKey))
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user