开封建网站的公司,网站建设寮步,郴州网络营销,h5制作平台免费推荐vue3使用element-plus#xff0c;树组件el-tree增加引导线
vue3项目element-plus#xff0c;树组件el-tree增加引导线
element-plus组件库的el-tree样式
因为element的样式不满足当前的的需求#xff0c;UI图#xff0c;所以对el-tree进行增加了引导线 修改样式如下树组件el-tree增加引导线
vue3项目element-plus树组件el-tree增加引导线
element-plus组件库的el-tree样式
因为element的样式不满足当前的的需求UI图所以对el-tree进行增加了引导线 修改样式如下增加引导线并且实现增删输入框 代码实现
1、在vue3中组件里面template模板引入el-tree组件需要设置:indent“0”不然每层树padding-left呈18px的倍数增加
div classmytreeel-tree:indent0:datadata:propsdefaultProps:expand-on-click-nodefalse:highlight-currentfalsenode-keyidnode-clickhandleNodeClick:default-expanded-keysexpDtable/el-tree
/divindet设置每层叔padding-left为0data绑定的展示数据props配置选项里面配置节点子节点字段等默认绑定子节点childrenelement-plus里面有详细的解说[Tree 树形控件 | Element Plus]expand-on-click-node是否在点击节点的时候展开或者收缩节点 默认值为 true如果为 false则只有点箭头图标的时候才会展开或者收缩节点。node-key每个树节点用来作为唯一标识的属性整棵树应该是唯一的node-click当节点被点击的时候触发default-expanded-keys默认展开节点
2.在setup中声明变量datadefaultPropshandleNodeClickexpDtable
import { computed, shallowRef,ref,onMounted } from vue;const expDtable ref([])const data ref([{name: ,type: ,describe: ,cekk: true,id: 1}
])const defaultProps {children: children,label: label,
}
const handleNodeClick data {console.log(data)
}3.在el-tree里面写入输入框已经增删接着上面模板的代码 我们往里面继续写 el-tree:indent0:datadata:propsdefaultProps:expand-on-click-nodefalse:highlight-currentfalsenode-keyidnode-clickhandleNodeClick:default-expanded-keysexpDtabletemplate #default{ node, data }!-- {{node.level}} --div classcustom-tree-node styledisplay: flex; width: 100%div :style{width: node.level 1 ? 120px : node.level 2 ? 100px : 80px}el-input v-modeldata.name placeholder变量名 :disableddata.id 1 //divdiv stylewidth: 100px; margin-left: 10pxel-select v-modeldata.type placeholderSelect :disableddata.id 1el-option v-foritem in options :keyitem.value :labelitem.label :valueitem.value //el-select/divdiv stylewidth: 120px; margin-left: 10pxel-inputv-modeldata.describeplaceholder请输入用户变量用途typenumber:disableddata.id 1//divdiv stylewidth: 50px; text-align: center; margin-left: 20pxel-checkbox typecheckbox v-modeldata.cekk :disableddata.id 1 //divdiv stylewidth: 40px; text-align: rightspan stylecursor: pointer v-ifdata.type 2 data.boolean ! 1 clickchildAdd(node,data)/span/divdiv stylewidth: 40px; text-align: rightspan stylecursor: pointer v-ifdata.id ! 1 clickremove(node, data)-/span/div/div/template/el-tree4.在setup里面加上我们的新增方法删除方法以及选择框绑定的数据
import { computed, shallowRef,ref,onMounted } from vue;const containerRef shallowRef()
const options [{value: 1,label: javaScript},{value: 2,label: Arrayobject}
]const expDtable ref([])const data ref([{name: ,type: ,describe: ,cekk: true,id: 1}
])
// 新增
const addUser () {data.value.push({name: ,type: ,describe: ,cekk: true,children: [],id: getRandomSixDigitNumber()})
}const remove (node, datas) {const parent node.parent;const children parent.data.children || parent.data;const index children.findIndex(d d.id datas.id);children.splice(index, 1)
}const getRandomSixDigitNumber () {// 生成一个介于0包含和1不包含之间的随机浮点数let randomFloat Math.random()// 将这个浮点数放大到100000010^6的范围内并四舍五入到最近的整数let randomInt Math.floor(randomFloat * 1000000)// 检查生成的数是否小于100000六位数的最小值如果是则加上100000// 确保生成的数是一个六位数if (randomInt 100000) {randomInt 100000}return randomInt
}const childAdd (node,value) {if (node.level 3) {return false}expDtable.value [value.id]value.children.push({name: ,type: ,describe: ,cekk: true,id: getRandomSixDigitNumber(),children: []})data.value data.value
}
const defaultProps {children: children,label: label,
}
const handleNodeClick data {console.log(data)
}5.最后就是css主要代码实现在css部分该项目使用scssdeep深度选择器使用如下方式css代码如下
style
/* 鼠标浮动过的背景颜色 */
.el-tree-node__content:hover {background: #eeeeee;
}
/* 鼠标点击时节点的背景颜色 */
.el-tree-node:focus.el-tree-node__content {background-color: #eeeeee !important;color: node;
}
/* 鼠标失去焦点时节点背景的颜色 */
.el-tree--highlight-current .el-tree-node.is-current.el-tree-node__content {background: #eeeeee;
}/stylestyle langscss scoped
::v-deep .el-input__wrapper {border-radius: 10px;
}
::v-deep .el-select__wrapper {border-radius: 10px;
}
.mytree {width: 110%;margin-left: -30px;
}
:deep(.mytree) {.el-tree-node {position: relative;padding-left: 10px;margin-top: 10px;// height:50px;background: none;// margin-bottom: 10px;}.el-tree-node__children {padding-left: 10px;// height:100px;// margin-top:10px;}.el-tree-node :last-child:before {height: 38px;}.el-tree .el-tree-node:before {border-left: none;}.el-tree .el-tree-node:after {border-top: none;}.el-tree {background: none;}.el-tree-node:before {content: ;left: -4px;position: absolute;right: auto;border-width: 1px;border-left: 1px dashed #1389bc;bottom: 0px;height: 100%;top: -26px;width: 1px;}.el-tree-node:after {content: ;left: -4px;position: absolute;right: auto;border-width: 1px;border-top: 1px dashed #1389bc;height: 20px;top: 12px;width: 18px;}// .el-tree .el-tree-node__expand-icon.expanded {// -webkit-transform: rotate(0deg);// transform: rotate(0deg);// }.el-tree .el-icon-caret-right:before {content: \e723;font-size: 16px;color: #1389bc;position: absolute;left: -20px;top: -8px;}.el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {content: \e722;font-size: 16px;color: #1389bc;position: absolute;left: -20px;top: -8px;}.el-tree-node__expand-icon.is-leaf:before {content: \e722;font-size: 16px;color: #1389bc;position: absolute;left: -20px;top: -8px;}.el-tree-node__content .el-tree-node__expand-icon {padding: 0;// padding:10px 0;}
}
.start {width: 100%;// height: 400px;background: #eeeeee;margin: 0 auto;border-radius: 5px;.start-input {font-weight: 700;margin: 0 20px;}.table {width: 90%;margin: 0 auto;.table-row {display: flex;justify-content: space-between;font-size: 12px;color: #ccc;}.table-row-one {width: 100%;display: flex;justify-content: space-between;align-items: center;}}.button {margin: 0 20px;}
}
/style完整代码
templatediv stylepadding: 10px; width: 100%;div classstart style overflow: autodiv classstart-input输入/divdiv classtablediv classtable-rowdiv classtable-header stylewidth: 18%变量名/divdiv classtable-header stylewidth: 13%变量类型/divdiv classtable-header stylewidth: 15%; text-align: center描述/divdiv classtable-header是否必要/divdiv classtable-header/divdiv classtable-header/div/divdivdiv classtable-row-one!-- div stylewidth: 20%el-input v-modelinput placeholderPlease input //divdiv stylewidth: 25%el-select v-modelvalue placeholderSelectel-option v-foritem in options :keyitem.value :labelitem.label :valueitem.value //el-select/divdiv stylewidth: 25%el-input v-modelinput1 placeholderPlease input typenumber //divdiv stylewidth: 25%; margin-right: -70pxel-checkbox typecheckbox //divdivspan stylecursor: pointer/span/divdivspan stylecursor: pointer-/span/div --div classmytreeel-tree:indent0:datadata:propsdefaultProps:expand-on-click-nodefalse:highlight-currentfalsenode-keyidnode-clickhandleNodeClick:default-expanded-keysexpDtabletemplate #default{ node, data }!-- {{node.level}} --div classcustom-tree-node styledisplay: flex; width: 100%div :style{width: node.level 1 ? 120px : node.level 2 ? 100px : 80px}el-input v-modeldata.name placeholder变量名 :disableddata.id 1 //divdiv stylewidth: 100px; margin-left: 10pxel-select v-modeldata.type placeholderSelect :disableddata.id 1el-option v-foritem in options :keyitem.value :labelitem.label :valueitem.value //el-select/divdiv stylewidth: 120px; margin-left: 10pxel-inputv-modeldata.describeplaceholder请输入用户变量用途typenumber:disableddata.id 1//divdiv stylewidth: 50px; text-align: center; margin-left: 20pxel-checkbox typecheckbox v-modeldata.cekk :disableddata.id 1 //divdiv stylewidth: 40px; text-align: rightspan stylecursor: pointer v-ifdata.type 2 data.boolean ! 1 clickchildAdd(node,data)/span/divdiv stylewidth: 40px; text-align: rightspan stylecursor: pointer v-ifdata.id ! 1 clickremove(node, data)-/span/div/div/template/el-tree/div/div/div/divdiv classbuttonel-buttonv-forbutton in buttonsclickaddUser():keybutton.text:typebutton.typetextbgstylemargin-top: 30px{{ button.text }}/el-button/div/div/div
/templatescript setup
import { computed, shallowRef,ref,onMounted } from vue;const buttons [{ type: primary, text: 新增 }]const input ref()
const input1 ref()const value ref()
const options [{value: 1,label: javaScript},{value: 2,label: Arrayobject}
]const expDtable ref([])const data ref([{name: ,type: ,describe: ,cekk: true,id: 1}
])
// 新增
const addUser () {data.value.push({name: ,type: ,describe: ,cekk: true,children: [],id: getRandomSixDigitNumber()})
}const remove (node, datas) {const parent node.parent;const children parent.data.children || parent.data;const index children.findIndex(d d.id datas.id);children.splice(index, 1)// const parent node.parent// const children parent.data.children || parent.data// console.log(children)// const id children.filter(d d.id datas.id)// if (id.length 0) {// console.log(id[0].id)// const T data.value.slice(id[0].id, 1)// console.log(data.value)// console.log(T)// data.value [...data.value]// }}const getRandomSixDigitNumber () {// 生成一个介于0包含和1不包含之间的随机浮点数let randomFloat Math.random()// 将这个浮点数放大到100000010^6的范围内并四舍五入到最近的整数let randomInt Math.floor(randomFloat * 1000000)// 检查生成的数是否小于100000六位数的最小值如果是则加上100000// 确保生成的数是一个六位数if (randomInt 100000) {randomInt 100000}return randomInt
}const childAdd (node,value) {if (node.level 3) {return false}expDtable.value [value.id]value.children.push({name: ,type: ,describe: ,cekk: true,id: getRandomSixDigitNumber(),children: []})data.value data.value
}
const defaultProps {children: children,label: label,
}
const handleNodeClick data {console.log(data)
}
/scriptstyle
/* 鼠标浮动过的背景颜色 */
.el-tree-node__content:hover {background: #eeeeee;
}
/* 鼠标点击时节点的背景颜色 */
.el-tree-node:focus.el-tree-node__content {background-color: #eeeeee !important;color: node;
}
/* 鼠标失去焦点时节点背景的颜色 */
.el-tree--highlight-current .el-tree-node.is-current.el-tree-node__content {background: #eeeeee;
}/stylestyle langscss scoped
::v-deep .el-input__wrapper {border-radius: 10px;
}
::v-deep .el-select__wrapper {border-radius: 10px;
}
.mytree {width: 110%;margin-left: -30px;
}
:deep(.mytree) {.el-tree-node {position: relative;padding-left: 10px;margin-top: 10px;// height:50px;background: none;// margin-bottom: 10px;}.el-tree-node__children {padding-left: 10px;// height:100px;// margin-top:10px;}.el-tree-node :last-child:before {height: 38px;}.el-tree .el-tree-node:before {border-left: none;}.el-tree .el-tree-node:after {border-top: none;}.el-tree {background: none;}.el-tree-node:before {content: ;left: -4px;position: absolute;right: auto;border-width: 1px;border-left: 1px dashed #1389bc;bottom: 0px;height: 100%;top: -26px;width: 1px;}.el-tree-node:after {content: ;left: -4px;position: absolute;right: auto;border-width: 1px;border-top: 1px dashed #1389bc;height: 20px;top: 12px;width: 18px;}// .el-tree .el-tree-node__expand-icon.expanded {// -webkit-transform: rotate(0deg);// transform: rotate(0deg);// }.el-tree .el-icon-caret-right:before {content: \e723;font-size: 16px;color: #1389bc;position: absolute;left: -20px;top: -8px;}.el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {content: \e722;font-size: 16px;color: #1389bc;position: absolute;left: -20px;top: -8px;}.el-tree-node__expand-icon.is-leaf:before {content: \e722;font-size: 16px;color: #1389bc;position: absolute;left: -20px;top: -8px;}.el-tree-node__content .el-tree-node__expand-icon {padding: 0;// padding:10px 0;}
}
.start {width: 100%;// height: 400px;background: #eeeeee;margin: 0 auto;border-radius: 5px;.start-input {font-weight: 700;margin: 0 20px;}.table {width: 90%;margin: 0 auto;.table-row {display: flex;justify-content: space-between;font-size: 12px;color: #ccc;}.table-row-one {width: 100%;display: flex;justify-content: space-between;align-items: center;}}.button {margin: 0 20px;}
}
/style
