深圳哪些公司需要做网站,外贸流程图解,wordpress随机切换主页内容,网站建设 jz.woonl一、功能
功能描述
数据双向穿梭#xff1a;支持从左侧向右侧转移数据#xff0c;以及从右侧向左侧转移数据。懒加载支持#xff1a;支持懒加载数据#xff0c;适用于大数据量的情况。多种展示形式#xff1a;右侧列表支持以树形结构或列表形式展示。全选与反选#xf…一、功能
功能描述
数据双向穿梭支持从左侧向右侧转移数据以及从右侧向左侧转移数据。懒加载支持支持懒加载数据适用于大数据量的情况。多种展示形式右侧列表支持以树形结构或列表形式展示。全选与反选支持全选和全不选操作以及保持树形结构的层级关系。搜索过滤支持对左侧和右侧数据进行搜索过滤。自定义节点内容支持自定义右侧列表中每个节点的内容
配置选项 nodeKey节点的主键用于唯一标识每个节点。 leftTitle 和 rightTitle左侧和右侧树形列表的标题。 lazy是否开启懒加载当设置为 true 时需要通过 loadMethod 方法加载数据。 loadMethod懒加载时用于加载数据的方法。 defaultProps树节点的默认属性包括标签、子节点和禁用状态。 leftData 和 rightData左侧和右侧树形列表的数据。 defaultSelectionKeys默认选中的数据的 ID 列表。 isSort是否对右侧数据进行排序。 defaultExpandAll是否默认展开所有节点。 checkOnClickNode是否在点击节点的时候选中节点默认值为 false即只有在点击复选框时才会选中节点。 expandOnClickNode是否在点击节点时展开或收缩节点。 isToList是否将右侧数据展示为列表形式。
事件 checkVal当选中数据发生变化时触发的事件返回当前选中的数据。
二、使用
1、 tree to list 使用
script langts setup
import { ref } from vue
const transferProps ref({label: name,children: children,disabled: disabled,isLeaf: leaf,
})const checkVal (val: any) {console.log(checkVal , val)
}const loadNode async (pid 0) {return new Promise((resolve) {// 模拟网络请求延迟setTimeout(() {// 假数据树结构let dataif (pid 0) {data [{ pid: 0, id: 1, name: region }]} else if (pid 1) {data [{ pid: 1, id: 2, name: region1-1 }, { pid: 1, id: 3, name: region1-2, leaf: true }]} else if (pid 2) {data [{ pid: 2, id: 4, name: region2-1 }, { pid: 2, id: 5, name: region2-2, leaf: true }, { pid: 2, id: 6, name: region2-3, leaf: true }]} else {data []}// 返回对应父节点的子节点resolve(data || [])}, 300) // 模拟延迟})
}
/scripttemplatedivZtTreeTransfer:default-propstransferProps:load-methodloadNodenode-keyidis-select-all-nodesis-sortis-to-listlazycheck-valcheckVal//div
/template
2、 tree to tree
可以配置默认选中的数据的ids显示在右侧列表以实现数据回显 使用
script langts setup
import { ZtTreeTransfer } from zt-components/componentsimport { ref } from vueconst fromData ref([{id: 1,label: 1Level one 1,children: [{id: 4,label: 1-1,children: [{id: 9,label: 1-1-1,},{id: 10,label: 1-1-2,},],},],},{id: 2,label: 2Level one 2,children: [{id: 5,label: 2-1,},{id: 6,label: 2-2,},],},{id: 3,label: 3Level one 31111111,children: [{id: 7,label: 3-111111111111111111,disabled: true,},{id: 8,label: Level two 3-21111111,disabled: true,children: [{id: 11,label: 4-111111111111111111111,},{id: 12,label: 4-211111111111111111111,},],},],},
]) // 树形数据
const toData ref([9, 10]) // 选中的ids数据
const transferProps ref({label: label,children: children,disabled: disabled,
})const checkVal (val: any) {console.log(val)
}
/scripttemplatedivZtTreeTransfer:default-propstransferProps:default-selection-keystoData:left-datafromDatanode-keyiddefault-expand-allis-select-all-nodesis-sortcheck-valcheckVal//div
/template
三、代码实现
script langts setup
import { computed, nextTick, ref, watch } from vue
import { ArrowLeft, ArrowRight, Search } from element-plus/icons-vue/* 定义props */
const props: TreeTransferProps defineProps({// 主键nodeKey: {type: String,default: id,},// 左侧标题leftTitle: {type: String,default: () {return 全部列表},},// 右侧标题rightTitle: {type: String,default: () {return 已选列表},},// 是否开启懒加载lazy: { type: Boolean, default: false },// 懒加载时加载数据的方法loadMethod: { type: Function, required: false },// tree绑定的propsdefaultProps: {type: Object,default: () ({label: label,children: children,disabled: disabled,}),},// 左侧树结构数据leftData: {type: Array,default: () {return []},},// 默认选中的数据的ids显示在右侧列表defaultSelectionKeys: {type: Array,default: () {return []},},// 右侧数据是否按顺序排序 仅在平铺展开是有效 只支持按住键正序排序isSort: {type: Boolean,},defaultExpandAll: {type: Boolean,default: false,},// 是否在点击节点的时候选中节点默认值为 false即只有在点击复选框时才会选中节点。checkOnClickNode: {type: Boolean,default: false,},// 是否在点击节点的时候展开或者收缩节点 默认值为 true如果为 false则只有点箭头图标的时候才会展开或者收缩节点。expandOnClickNode: {type: Boolean,default: true,},// 选择右侧所选数据的展示类型默认是treetrue时为listisToList: {type: Boolean,default: false,},
}) // 又侧筛选条件/* 定义emit */
const emit defineEmits([checkVal])/*** 定义props类型*/
export interface TreeTransferProps {nodeKey: anyleftTitle: anyrightTitle: anydefaultProps: anyleftData: anydefaultSelectionKeys: anyisSort: booleandefaultExpandAll: ArrayanycheckOnClickNode: booleanexpandOnClickNode: booleanisToList: anyloadMethod: Functionlazy: boolean
}const isCheckedAllLeft ref(false) // 左侧全选框是否选中
const isCheckedAllRight ref(false) // 右侧全选框是否选中const isLeftCheckAllBoxDisabled ref(false) // 左侧全选框是否禁用
const isRightCheckAllBoxDisabled ref(false) // 右侧全选框是否禁用const leftTreeRef ref() // 左侧树ref
const rightTreeRef ref() // 右侧树refconst leftFilterText ref() // 左侧筛选条件
const rightFilterText ref()
const leftTreeData ref([]) // 左侧tree数据
// 用于在右侧显示的数据列表
const rightData ref([]) // 右侧列表结构数据
const rightTreeData ref([]) // 右侧树结构数据// 数组打平
const flattenTree (treeData: any[], defaultProps: any): any[] {let flatData: any[] []treeData.forEach((node) {flatData.push(node)if (node[defaultProps.children] node[defaultProps.children].length) {flatData flatData.concat(flattenTree(node[defaultProps.children], defaultProps))}})return flatData
}// 校验树是否全选
const checkedAllTrue (treeRef: any, treeData: any[], nodeKey: any, defaultProps: any): boolean {// 校验是否全选const allKeys: string[] treeRef.getCheckedKeys()const allNodes: any[] flattenTree(treeData, defaultProps)const allKeysSet: Setstring new Set(allKeys)const allNodesSet: Setstring new Set(allNodes.map(node node[nodeKey]))return allKeysSet.size allNodesSet.size [...allKeysSet].every(key allNodesSet.has(key))
}// 深拷贝
const deepClone (obj: any): any {// 判断拷贝的obj是对象还是数组const objClone: any Array.isArray(obj) ? [] : {}if (obj typeof obj object) {// obj不能为空并且是对象或者是数组 因为null也是objectfor (const key in obj) {if (obj.hasOwnProperty(key)) {if (obj[key] typeof obj[key] object) {// obj里面属性值不为空并且还是对象进行深度拷贝objClone[key] deepClone(obj[key]) // 递归进行深度的拷贝} else {objClone[key] obj[key] // 直接拷贝}}}}return objClone
}// 校验是否树节点是否全部禁用 nodes: []
const checkAllDisabled (nodes: any[], defaultProps: any): boolean {if (!(nodes Array.isArray(nodes))) return falsefor (const node of nodes) {// 如果当前节点的disabled不是true则直接返回falseif (!node[defaultProps.disabled]) {return false}// 如果当前节点有子节点则递归检查子节点if (node[defaultProps.children]?.length) {const childrenAreDisabled checkAllDisabled(node[defaultProps.children], defaultProps)// 如果子节点中有任何disabled不是true则返回falseif (!childrenAreDisabled) {return false}}}// 如果所有节点的disabled都是true则返回truereturn true
}// 设置数组的某个字段值为某个参数
const setFieldValue (array: any[], field: string, value: any, defaultProps: any) {// 遍历数组中的每个元素array.forEach((item) {// 如果元素是对象且有属性则设置字段值if (typeof item object item ! null) {item[field] value// 如果元素有子数组递归调用函数if (Array.isArray(item[defaultProps.children])) {setFieldValue(item[defaultProps.children], field, value, defaultProps)}}})
}// 设置禁用
const setTreeIsDisabled (data: any[], nodeKeysToDisable: string[], nodeKey: string, defaultProps: any, flag true) {if (!data || !data.length) returndata.forEach((item) {if (nodeKeysToDisable nodeKeysToDisable.length nodeKeysToDisable.includes(item[nodeKey])) {// 如果当前节点的id主键在要禁用的id主键列表中设置disabled为trueitem[defaultProps.disabled] flag}// 如果当前节点有children递归调用函数const itemChildren item[defaultProps.children]if (itemChildren Array.isArray(itemChildren)) {setTreeIsDisabled(itemChildren, nodeKeysToDisable, nodeKey, defaultProps, flag)}})
}// 获取数组中disabled的节点的Ids
const getDisabledNodeIds (nodes: any[], nodeKey: string, defaultProps: any): string[] {const disabledIds: string[] []function traverse(node: any) {if (node.disabled) {disabledIds.push(node[nodeKey])}if (node[defaultProps.children]?.length) {node[defaultProps.children].forEach((child: any) traverse(child))}}nodes.forEach(node traverse(node))return disabledIds
}// 递归校验 当子节点全部被禁用时 则设置其父节点也禁用
const updateDisabledStatus (nodes: any[], defaultProps: any) {nodes.forEach((node) {// 首先检查当前节点是否有子节点if (node[defaultProps.children]?.length) {// 假设当前节点的所有子节点都是禁用的let allChildrenDisabled true// 递归检查所有子节点的disabled状态node[defaultProps.children].forEach((child: any) {// 如果子节点有子节点递归调用if (child[defaultProps.children]?.length) {updateDisabledStatus([child], defaultProps) // 递归更新子节点状态}// 更新子节点的disabled状态child[defaultProps.disabled] child[defaultProps.children].length 0? child[defaultProps.children].every((c: any) c[defaultProps.disabled]): child[defaultProps.disabled]// 如果发现任何一个子节点没有被禁用更新假设if (!child[defaultProps.disabled]) {allChildrenDisabled false}})// 更新当前节点的disabled状态node[defaultProps.disabled] allChildrenDisabled}})
}// 左侧输入框过滤事件
const filterLeftNode (value, data) {if (!value) return truereturn data[props.defaultProps.label].includes(value)
}// 右侧输入框过滤事件
const filterRightNode (value, data) {if (!value) return truereturn data[props.defaultProps.label].includes(value)
}// 右侧数据按顺序排序
const sortRightListByKey () {if (!props.isSort) return rightData.valuereturn rightData.value.sort((a, b) a[props.nodeKey] - b[props.nodeKey])
}// 递归函数用于构建只包含 ids 数组中 id 的树结构
const filterTreeByIds (treeData, ids) {return treeData.map((node) {// 创建一个新节点对象避免直接修改原始数据const newNode { ...node }newNode[props.defaultProps.disabled] false// 如果当前节点的 id 在 ids 中保留这个节点及其子节点if (ids.includes(node[props.nodeKey])) {// 递归地过滤子节点newNode[props.defaultProps.children] filterTreeByIds(node[props.defaultProps.children] || [], ids)} else {// 如果当前节点的 id 不在 ids 中但有子节点递归地过滤子节点// 同时如果子节点中有至少一个节点的 id 在 ids 中保留当前节点newNode[props.defaultProps.children] filterTreeByIds(node[props.defaultProps.children] || [], ids).filter(child child ! null)}// 如果当前节点的 id 不在 ids 中且没有子节点或子节点都不在 ids 中则不保留这个节点if (!ids.includes(node[props.nodeKey]) (!newNode[props.defaultProps.children] || newNode[props.defaultProps.children].length 0)) {return null}// 返回新的节点对象return newNode}).filter(node node ! null) // 过滤掉 null 节点
}// 去右边
const toRight () {/* 右侧显示的数据获取 */rightTreeData.value getRightTreeData()rightData.value getRightListData()// 给父组件抛出已选择的数据checkVal()/** 更新移动后的左侧树的节点状态 和全选按钮状态* 先给所有已右移的节点设置禁用* 再通过递归计算是否将子节点的父节点也设置禁用子节点全部禁用时将其父节点也禁用** */const rids rightData.value.map(item item[props.nodeKey])setTreeIsDisabled(leftTreeData.value, rids, props.nodeKey, props.defaultProps)updateDisabledStatus(leftTreeData.value, props.defaultProps)isLeftCheckAllBoxDisabled.value checkAllDisabled(leftTreeData.value, props.defaultProps)
}
// 去左边
const toLeft async () {if (props.isToList) {// 获取当前右侧选中的数据没有就returnconst listToLeftIds rightData.value.filter(item item.checked).map(item item[props.nodeKey])if (!listToLeftIds.length) return// 从右侧去掉选中的数据,并将所有数据的checked设为false避免由索引变更导致的异常选中const unselectedList rightData.value.filter(item !item.checked)rightData.value.map(item (item.checked false))rightData.value unselectedList// 恢复选中数据在左侧的可选状态,并清除选中状态listToLeftIds.forEach(item leftTreeRef.value.setChecked(item, false))setTreeIsDisabled(leftTreeData.value, listToLeftIds, props.nodeKey, props.defaultProps, false)updateDisabledStatus(leftTreeData.value, props.defaultProps)checkVal()isLeftCheckAllBoxDisabled.value checkAllDisabled(leftTreeData.value, props.defaultProps)} else {// 获取当前右侧选中的数据没有就returnconst treeToLeftIds getRightTReeCheckedNodeIds()if (!treeToLeftIds.length) return// 恢复选中数据在左侧的可选状态,并清除选中状态setTreeIsDisabled(leftTreeData.value, treeToLeftIds, props.nodeKey, props.defaultProps, false)treeToLeftIds.forEach(item leftTreeRef.value.setChecked(item, false))updateDisabledStatus(leftTreeData.value, props.defaultProps)checkVal()isLeftCheckAllBoxDisabled.value checkAllDisabled(leftTreeData.value, props.defaultProps)rightTreeData.value []rightTreeData.value getRightTreeData()isCheckedAllRight.value checkedAllTrue(rightTreeRef.value, rightTreeData.value, props.nodeKey, props.defaultProps)}
}// 获取右侧树中选中节点的Ids
const getRightTReeCheckedNodeIds () {// 返回全部节点填false, false 返回叶子结点填true,trueconst checkNodeIds rightTreeRef.value.getCheckedKeys(true)if (!checkNodeIds.length) return []return checkNodeIds
}// 左侧数据全选操作全不选
const handleLeftAllCheck () {const leftTree leftTreeRef.valueconst disabledIds getDisabledNodeIds(leftTreeData.value, props.nodeKey, props.defaultProps)if (isCheckedAllLeft.value) {/** 操作 设置全选* 逻辑 已经设置了disable的节点无法编辑选中所以先获取所有设置了disable的节点的ids然后将所有数据放开disable设置全部选中选中后再将ids中的节点设置禁用* */setFieldValue(leftTreeData.value, props.defaultProps.disabled, false, props.defaultProps)leftTree?.setCheckedNodes(leftTreeData.value)setTreeIsDisabled(leftTreeData.value, disabledIds, props.nodeKey, props.defaultProps)isCheckedAllLeft.value true} else {/** 操作 设置全不选* 逻辑 已经设置disabled的节点不应该改变其选中和禁用状态 所以先获取所有禁用数据的ids也就是checkedtrue的所有当前选中状态的数据然后取消全部的选中状态再将ids中的节点设置为选中状态* */leftTree?.setCheckedNodes([])disabledIds.forEach(item leftTreeRef.value.setChecked(item, true))isCheckedAllLeft.value false}
}
// 左侧树节点checkbox被点击
const handleLeftCheckChange () {isCheckedAllLeft.value checkedAllTrue(leftTreeRef.value, leftTreeData.value, props.nodeKey, props.defaultProps)
}// 右侧树节点checkbox被点击
const handleRightCheckChange () {isCheckedAllRight.value checkedAllTrue(rightTreeRef.value, rightTreeData.value, props.nodeKey, props.defaultProps)
}// 右侧数据全选操作全不选
const handleRightAllCheck () {// listsetFieldValue(rightData.value, checked, isCheckedAllRight.value, props.defaultProps)// treerightTreeRef.value.setCheckedNodes(isCheckedAllRight.value ? rightTreeData.value : [])
}// 返回已选数据给父组件
const checkVal () {emit(checkVal, props.isToList ? rightData.value : leftTreeRef.value.getCheckedNodes(true))
}const walkTreeData (nodes, selectedKeys) {const ret []nodes.forEach((node) {const newNode { ...node }newNode[props.defaultProps.disabled] falsedelete newNode[props.defaultProps.children]node[props.defaultProps.children] (newNode[props.defaultProps.children] walkTreeData(node[props.defaultProps.children], selectedKeys))if (selectedKeys.includes(newNode[props.nodeKey]) || (newNode[props.defaultProps.children] newNode[props.defaultProps.children].length)) {ret.push(newNode)}})return ret
}// 获取右侧list结构数据
const getRightListData () {/* 右侧list结构数据获取 */if (!currentLeftUseableNodes.value.length) return []const newArr rightData.value.concat(currentLeftUseableNodes.value)const obj: any {}// 去重const peon: any newArr.reduce((cur, next) {obj[next[props.nodeKey]] ? : (obj[next[props.nodeKey]] true cur.push(next))cur.checked falsereturn cur}, []) // 设置cur默认类型为数组并且初始值为空的数组return peon
}// 获取右侧树结构数据
const getRightTreeData () {if (!leftTreeRef.value || !rightTreeRef.value) return []const checkedKeys leftTreeRef.value.getCheckedKeys(false) // 当前选中节点 key 的数组const halfCheckedKeys leftTreeRef.value.getHalfCheckedKeys() // 目前半选中的节点的 key 所组成的数组const allCheckedKeys halfCheckedKeys.concat(checkedKeys)if (allCheckedKeys allCheckedKeys.length) {return walkTreeData(leftTreeData.value, allCheckedKeys)} else {return []}
}// 获取左侧树当前所选的可进行右移操作的数据
const currentLeftUseableNodes computed(() {if (!leftTreeRef.value) return []// 返回全部节点填false 返回叶子结点填trueconst checkNodes leftTreeRef.value.getCheckedNodes(true) // 将返回当前选中节点的节点数组if (!checkNodes.length) return []// 过滤当前已选如果没有选择新的数据就returnconst useableNodes checkNodes.filter(item !item[props.defaultProps.disabled])if (!useableNodes.length) return []return useableNodes
})// 左移按钮disabled计算
const isToLeftBtnDisabled computed(() {let checkNodes []rightTreeRef.value (checkNodes rightTreeRef.value.getCheckedNodes(false, false)) // tree选择的节点const listToLeftIds rightData.value.filter(item item.checked).map(item item[props.nodeKey]) // list选择的节点return !(listToLeftIds.length || checkNodes.length)
})// 更新 treeData 中的指定节点添加子节点
const updateTreeData (targetNode: any, childNodes: any) {const recursiveUpdate (nodes: any) {for (const node of nodes) {if (node[props.nodeKey] targetNode[props.nodeKey]) {node[props.defaultProps.children] childNodes // 将子节点添加到目标节点} else if (node[props.defaultProps.children]) {recursiveUpdate(node[props.defaultProps.children]) // 递归查找目标节点}}}if (!Object.keys(leftTreeData.value).length) {leftTreeData.value childNodesreturn}recursiveUpdate(leftTreeData.value)
}// 懒加载方法
const handleLoadNode (node: any, resolve: any) {if (props.lazy) {const pid node.level 0 ? 0 : node.data[props.nodeKey]props.loadMethod(pid).then((res: any) {if (res || Array.isArray(res)) {// 更新 treeData确保包含懒加载的节点// 在节点展开时确保 treeData 是最新的完整结构resolve(res)} else {resolve([])}updateTreeData(node.data, res)}).catch((err: any) {console.error(Failed to load node data:, err)resolve([])})} else {resolve(node.data[props.defaultProps.children] || [])}
}// 监听右侧数据变化判断右侧全选框是否选中
watch(() rightData.value,(newData) {if (!newData || !props.isToList) returnisCheckedAllRight.value newData.length newData.every(item item.checked)},{deep: true,immediate: true,},
)// 初始化操作将传参的默认选中节点传递并显示到右侧
watch(() props.defaultSelectionKeys,(newKeys) {if (props.lazy props.loadMethod) returnif (!newKeys?.length) returnnextTick(async () {// 设置目前选中的节点await leftTreeRef.value.setCheckedKeys(newKeys)toRight()})},{deep: true,immediate: true,},
)// 初始化操作将传参的默认选中节点传递并显示到右侧
watch(() props.leftData,(newData) {// 如果是懒加载并且有loadMethod方法直接returnif (props.lazy props.loadMethod) return// 没有数据就returnif (!newData?.length) returnleftTreeData.value deepClone(newData)setFieldValue(leftTreeData.value, props.defaultProps.disabled, false, props.defaultProps)},{deep: true,immediate: true,},
)watch(leftFilterText, (val) {leftTreeRef.value!.filter(val)
})
/scripttemplatediv classzt-tree-transfer!-- 左边 --div classleft-contentdiv classlistdiv classleft_lowlineel-checkboxv-modelisCheckedAllLeft:disabledisLeftCheckAllBoxDisabledlabelsizelargechangehandleLeftAllCheck/p classleft_title{{ leftTitle }}/p/div!-- 搜索 --div classleft_inputel-inputv-modelleftFilterText:prefix-iconSearchclassw-50 m-2placeholder搜索clearable//divdiv classleft-treeel-treerefleftTreeRefv-slot{ node, data }:check-on-click-nodecheckOnClickNode:dataleftTreeData:default-expand-alldefaultExpandAll:expand-on-click-nodeexpandOnClickNode:filter-node-methodfilterLeftNode:lazylazy:loadhandleLoadNode:node-keynodeKey:propsdefaultPropshighlight-currentshow-checkboxcheck-changehandleLeftCheckChange//div/div/div!-- 中间按钮 --div classbtn-divdiv classbtn-item clicktoRight()el-button:disabled!currentLeftUseableNodes.length:iconArrowRightsizelargetypeprimary//divdiv classbtn-item clicktoLeft()el-button:disabledisToLeftBtnDisabled:iconArrowLeftsizelargetypeprimary//div/div!-- 右边 --div classrigh-contentdiv classlistdiv classleft_lowlineel-checkboxv-modelisCheckedAllRight:disabledisRightCheckAllBoxDisabledlabelsizelargechangehandleRightAllCheck/p classleft_title{{ rightTitle }}/p/div!-- 搜索 --div classleft_inputel-inputv-modelrightFilterText:prefix-iconSearchclassw-50 m-2placeholder搜索clearable//div!-- 右侧数据展示格式为list时 --div v-ifisToList!-- 根据[props.nodeKey]排序 根据rightFilterText进行过滤显示 --divv-for(item, index) in sortRightListByKey().filter((item) item[defaultProps.label].includes(rightFilterText))v-ifsortRightListByKey().filter((item) item[defaultProps.label].includes(rightFilterText)).length:keyindexclassright_item!-- 检查是否有名为 right-item 的插槽内容 --slotv-if$slots[right-item]:indexindex:itemitemnameright-item/slot!-- 如果没有则显示默认内容 --div v-elseel-checkboxv-modelitem.checked:false-labelfalse:true-labeltrue:valueitem[nodeKey]{{ item[defaultProps.label] }}/el-checkbox/div/divdiv v-else stylepadding: 10pxel-text typeinfo暂无数据/el-text/div/div!-- 右侧数据展示格式为tree时 --div v-else classright-treeel-treerefrightTreeRefv-slot{ node, data }:check-on-click-nodecheckOnClickNode:datarightTreeData:default-expand-alldefaultExpandAll:expand-on-click-nodeexpandOnClickNode:filter-node-methodfilterRightNode:node-keynodeKey:propsdefaultPropshighlight-currentshow-checkboxcheck-changehandleRightCheckChange//div/div/div/div
/templatestyle langless scoped
.zt-tree-transfer {display: flex;height: 500px;width: 800px;box-sizing: border-box;.btn-div {flex: 1;height: 60%;margin: auto;display: flex;flex-direction: column;justify-content: space-evenly;align-items: center;.btn-item {:deep(svg),:deep(.el-icon) {height: 1.6em !important;width: 1.6em !important;}}}.left-content {width: 45%;border: 1px solid #dcdfe6;box-sizing: border-box;padding: 5px 10px;.list {width: 100%;height: 100%;display: flex;flex-direction: column;overflow: hidden;.left-tree {width: calc(100% - 5px);height: 100%;overflow: auto;margin-top: 10px;padding-right: 5px;}}}.righ-content {box-sizing: border-box;border: 1px solid #dcdfe6;padding: 5px 10px;width: 45%;overflow: auto;.right_item {text-align: left;}.list {height: 100%;display: flex;flex-direction: column;}}.left_lowline {display: flex;align-items: center;}.right_lowline {display: flex;align-items: center;}:deep(.el-input__wrapper) {position: relative;.el-input__inner {padding-right: 18px;}.el-input__suffix {position: absolute;right: 8px;top: 50%;transform: translateY(-50%);}}// 滚动条宽度::-webkit-scrollbar {width: 6px;height: 6px;}// 滚动条轨道::-webkit-scrollbar-track {background: rgb(239, 239, 239);border-radius: 2px;}// 小滑块::-webkit-scrollbar-thumb {background: #40a0ff49;border-radius: 2px;}::-webkit-scrollbar-thumb:hover {background: #40a0ff;}:deep(.el-button:focus) {outline: none;}:deep(.el-tree) {display: inline-block;min-width: 100%;.el-tree-node__content {//margin-right: 5px;}}
}
/style
