浙江省龙泉市建设局网站,球类网站如何做宣传,公司设计一个网站需要多久,王一博网页制作模板需求#xff1a;
我们在开发过程中#xff0c;会遇到需要将一个数据选择做成穿梭框#xff0c;但是要求穿梭框左侧为树形结构、右侧为无层级结构的数据展示#xff0c;ElementUI自身无法在穿梭框中添加树形结构#xff0c;网上搜到了大佬封装的插件但是对于右侧的无树形结…需求
我们在开发过程中会遇到需要将一个数据选择做成穿梭框但是要求穿梭框左侧为树形结构、右侧为无层级结构的数据展示ElementUI自身无法在穿梭框中添加树形结构网上搜到了大佬封装的插件但是对于右侧的无树形结构一点还是不太满足。以下是我们简单的封装写的组件可以实现此功能 1封装的treeTransfetr组件如下
templatediv classtreeTransfer!-- 左边 --div classleftTreediv classlistdiv classleft_lowlinediv classleftcheck_conel-checkbox v-modelcheckedLeft :disabledleftTreeData.length 1 label sizelargestylemargin-right: 12px changeleftAllCheck /p classleft_title{{ props.title[0] }}/p/divdiv{{ leftOperation.length }}/{{ leftAllselectIdarry.length }}/div/divel-tree refleftTreeRef :dataleftTreeData show-checkboxnode-keyid :propsprops.defaultProps v-slot{ node, data } accordion:check-strictlytruecheckonCheckLeft default-expand-alldiv{{ data.label }}/div/el-tree/div/div!-- 中间按钮 --div classbtnDivdiv classmg10el-button clicktoRight() iconele-Right typeprimary circle :disabledleftOperation.length 1//divdiv classmg10el-button clicktoLeft() iconele-Back typeprimary circle :disabledrightOperation.length 1//div/div!-- 右边 --div classrightTreediv classlistdiv classleft_lowlinediv classleftcheck_conel-checkbox v-modelcheckedRight :disabledrightTreeData.length 1 label sizelargestylemargin-right: 12px changerightAllCheck /p classleft_title{{ props.title[1] }}/p/divdiv{{ rightOperation.length }}/{{ rightAllselectIdarry.length }}/div/divel-tree refrightTreeRef :datarightTreeData show-checkbox node-keyid:propsprops.defaultProps v-slot{ node, data } accordion :check-strictlytruecheckonCheckRight default-expand-alldiv{{ data.label }}/div/el-tree/div/div/div/templatescript setup langtsimport { ref, onMounted, watch, nextTick } from vue;import lodash from lodash-esconst props defineProps([fromData, toData, defaultProps, title, visible]);const checkedLeft ref(false)const checkedRight ref(false)const leftOperation refany[]([])const rightOperation refany[]([])// 定义emitconst emits defineEmits([addStaffchange]);const leftTreeRef ref();const rightTreeRef ref();// 左侧数据const leftTreeData ref([] as any);// 右侧数据const rightTreeData ref([] as any);// 左侧可以选中id集合const leftAllselectIdarry ref([] as any)// 右侧可以选中id集合const rightAllselectIdarry ref([] as any)watch(props,newVal {leftTreeData.value lodash.cloneDeep(newVal.fromData)rightTreeData.value lodash.cloneDeep(newVal.toData)// 获取左侧的全选中的idleftAllselectIdarry.value getAllIds(leftTreeData.value, [])if (newVal.visible) {checkedLeft.value falsecheckedRight.value falseleftOperation.value []rightOperation.value []nextTick(() {leftTreeRef?.value.setCheckedKeys([])})}},{ immediate: true })defineExpose({leftTreeData,rightTreeData})onMounted(() {})// 去右边const toRight async () {const leftTree leftTreeRef.value;if (!leftTree) {return}const leftNodes leftTree.getCheckedNodes(false, false)const checkedKeys leftTree.getCheckedKeys(false)const rightTree rightTreeRef.valueconst newArr rightTreeData.value.concat(leftNodes)let obj {};let peon newArr.reduce((cur,next) {obj[next[id]] ? : obj[next[id]] true cur.push(next);return cur;},[]) //设置cur默认类型为数组并且初始值为空的数组const getnewleftArry peon.map(item {return {id: item.id,label: item.label,pid: item.pid,children: [],}})rightTreeData.value getnewleftArryleftOperation.value leftTreeRef.value?.getCheckedKeys(false)emits(addStaffchange, checkedKeys)setTimeout(() {rightTree?.setCheckedNodes(leftNodes);rightOperation.value rightTreeRef.value?.getCheckedKeys(false)rightAllcheckChange()}, 500)};// 去左边const toLeft async () {const rightTree rightTreeRef.valueif (!rightTree) {return}const checkedKeys rightTree.getCheckedKeys(false)for(var i0; irightTreeData.value.length;i){if(checkedKeys.includes(rightTreeData.value[i].id)){rightTreeData.value.splice(i,1)i-1}}rightOperation.value rightTree?.getCheckedKeys(false)if (rightTreeData.value rightTreeData.value.length 0) {checkedRight.value false}emits(addStaffchange, getAllIds(rightTreeData.value, []))};//左侧选中const onCheckLeft () {leftOperation.value leftTreeRef.value?.getCheckedKeys(false)if (leftOperation.value.length leftAllselectIdarry.value.length) {checkedLeft.value true} else {checkedLeft.value false}}// 右侧选中const onCheckRight () {rightOperation.value rightTreeRef.value?.getCheckedKeys(false)rightAllselectIdarry.value.length getAllIds(rightTreeData.value, []).lengthrightAllcheckChange()}// 右侧是否全选获取function rightAllcheckChange () {rightAllselectIdarry.value.length getAllIds(rightTreeData.value, []).lengthif (rightOperation.value.length rightAllselectIdarry.value.length) {checkedRight.value true} else {checkedRight.value false}return checkedRight.value}// 左侧全选中值 const leftAllCheck () {if (checkedLeft.value) {leftTreeRef.value.setCheckedKeys(getAllIds(leftTreeData.value, []))checkedLeft.value true;} else {leftTreeRef.value.setCheckedKeys([])checkedLeft.value false}leftOperation.value leftTreeRef.value?.getCheckedKeys(false)}// 右侧全选中值 const rightAllCheck () {if (checkedRight.value) {rightTreeRef.value.setCheckedKeys(getAllIds(rightTreeData.value, []))checkedRight.value true} else {rightTreeRef.value.setCheckedKeys([])checkedRight.value false}rightOperation.value rightTreeRef.value?.getCheckedKeys(false)}// 递归获取所有id数据function getAllIds(tree, result) {//遍历树获取id数组for (const i in tree) {if (!tree[i].disabled) {result.push(tree[i].id); // 遍历项目满足条件后的操作}if (tree[i].children) {// 存在子节点就递归getAllIds(tree[i].children, result);}}return result;}/scriptstyle scoped langscss.treeTransfer {display: flex;justify-content: center;.el-tree {overflow: auto;max-height: 360px;}.leftTree {border: 1px solid #ebeef5;width: 40%;height: calc(100% - 60px);overflow: auto;}.left_lowline {display: flex;align-items: center;justify-content: space-between;background: #f5f7fa;padding: 0 23px 0 10px;.leftcheck_con {display: flex;align-items: center;}}.btnDiv {width: 20%;height: calc(100% - 60px);text-align: center;margin: auto 0;line-height: 40px;position: relative;}.rightTree {width: 40%;height: calc(100% - 60px);}}/style2具体使用如下
treeTransfetr reftreeTransferRef :fromDatafromData:toDatatoData:visiblevisible:defaultPropstransferProps addStaffchangeaddStaffchange :title[筛选结果, 添加人员]/treeTransfetrlet treeTransferRef ref(); // 树形穿梭框
let fromData ref([{id: 1,pid: 0, //自定义pid的参数名默认为pid 必填falselabel: 张三-D1-DM,disabled: false,children: [{id: 1-1,pid: 1,label: 李四-D1-TL,disabled: false,children: []},{id: 1-2,pid: 1,label: 王五-D2-TL,disabled: false,children: [{id: 1-2-1,pid: 1-2,children: [],label: 赵六-D3-TL,disabled: true,},{id: 1-2-2,pid: 1-2,children: [],label: 李明-D4-TL,disabled: false,},{id: 1-2-3,pid: 1-2,children: [],label: 王三明-D5-TL,disabled: false,}]}]}
]); // 树形数据
let toData ref([]); // 选中的ids数据
const transferProps ref({label: label,children: children,disabled: disabled,
});
如果我们想要用插件实现推荐使用el-tree-transfer
