vue render方法循环遍历标签
render渲染多个标签不能使用 for循环渲染,只能通过数组的map等遍历的方式渲染多个标签<script>export default {isTreeNode: true,props: {// 父组件传过来的数组,这里数组的默认值要通过函数返回parentlistAr: {type: Array,default: () => []}},dat.
·
render渲染多个标签不能使用 for循环渲染,只能通过数组的map等遍历的方式渲染多个标签
<script>
export default {
isTreeNode: true,
props: {
// 父组件传过来的数组,这里数组的默认值要通过函数返回
parentlistAr: {
type: Array,
default: () => []
}
},
data () {
return {
searchName: "",
treeAvtinr: [], // 默认选中的树 id
backupParList: [],
curParList: [],
}
},
watch: {
searchName: function value(val) {
this.onSearch(val)
}
},
mounted () {
console.log('this.parentlistAr', this.parentlistAr)
this.backupParList = JSON.parse(JSON.stringify(this.parentlistAr))
},
render (createElement) {
return createElement(
"div",
{},
[
createElement(
"div",
{},
[
createElement(
"a-input-search",
{
attrs: {
allowClear: true,
vModel: "searchName",
placeholder: this.backupParList.length+ 'aa'
},
on: {
// search: (val) => {
// this.onSearch(val)
// },
input: (v) => {
this.onSearch(v.target.value)
}
}
},
)
]
),
this.backupParList.length ? createElement(
"a-tree",
{
attrs: {
blockNode: true,
defaultSelectedKeys: this.treeAvtinr,
defaultExpandAll: true
}
},
this.backupParList.length ? this.backupParList.map(item => {
return createElement(
"a-tree-node",
{
attrs: {
key: item.id
}
},
[
createElement(
"div",
{
attrs: {
class: "treeAction"
},
slot: "title",
on: {
click (item) {
this.getDictionary(item)
}
}
},
this.setagentNam(item)
),
item.children&&item.children.length ? item.children.map(ite => {
return createElement(
"a-tree-node",
{
attrs: {
key: ite.id
}
},
[
createElement(
"div",
{
attrs: {
class: "treeAction"
},
slot: "title",
on: {
click (ite) {
this.getDictionary(ite)
}
}
},
this.setagentNam(ite)
),
ite.children&&ite.children.length ? ite.children.map(it => {
return createElement(
"a-tree-node",
{
attrs: {
key: it.id
}
},
[
createElement(
"div",
{
attrs: {
class: "treeAction"
},
slot: "title",
on: {
click (it) {
this.getDictionary(it)
}
}
},
this.setagentNam(it)
),
it.children&&it.children.length ? it.children.map(i => {
return createElement(
"a-tree-node",
{
attrs: {
key: i.id
}
},
[
createElement(
"div",
{
attrs: {
class: "treeAction"
},
slot: "title",
on: {
click (i) {
this.getDictionary(i)
}
}
},
this.setagentNam(i)
),
i.children&&i.children.length ? i.children.map(is => {
return createElement(
"a-tree-node",
{
attrs: {
key: is.id
}
},
[
createElement(
"div",
{
attrs: {
class: "treeAction"
},
slot: "title",
on: {
click (is) {
this.getDictionary(is)
}
}
},
this.setagentNam(is)
),
]
)
})
:
["is"]
]
)
})
:
["I"]
]
)
})
:
["ITE"]
]
)
})
:
["IT"]
]
)
})
:
["IETN"]
)
:
[
createElement(
"p",
"暂无数据"
)
]
]
)
},
methods: {
onSearch (val) {
// backupParList
// parentlistAr
console.log('onSearch', val)
if (!val) {
this.backupParList = this.parentlistAr
return
}
this.backupParList = []
let filteNode = JSON.parse(JSON.stringify(this.parentlistAr))
if (filteNode) {
filteNode.forEach((n, i, a) => {
this.filterSearchList(n,val, filteNode)
})
}
},
//点击机构
getDictionary(row, is) {
this.$emit('itemHandle', row)
},
// 机构搜索
filterSearchList (parentlist,value, _arr) {
let _this = this
let tem_parentList = Object.assign([], parentlist)
let treeDeep = this.getTreeDepth(tem_parentList)
console.log('treeDeep', treeDeep)
for (let i=0; i<treeDeep-1; i++) {
let spliceCounter = 0;
_this.traverseTree(tem_parentList, n => {
if (_this.isHasChildren(n)) {
let children = n.children
let length = n.children.length - 1
for (let j=length; j>=0; j--) {
let e3 = children[j]
if (!_this.isHasChildren(e3) && e3.agentName.toString().indexOf(value) == -1) {
children.splice(j, 1)
spliceCounter++
}
}
}
})
if (spliceCounter == 0) {
break;
}
}
_this.backupParList = _arr
},
// 获取数的深度
getTreeDepth(node){
if (undefined == node || null == node) {
return 0;
}
// 返回结果
let r = 0;
// 树中当前层节点的集合。
let currentLevelNodes = [node];
// 判断当前层是否有节点
while(currentLevelNodes.length > 0){
// 当前层有节点,深度可以加一。
r++;
// 下一层节点的集合。
let nextLevelNodes = new Array();
// 找到树中所有的下一层节点,并把这些节点放到 nextLevelNodes 中。
for(let i = 0; i < currentLevelNodes.length; i++) {
let e = currentLevelNodes[i];
if (this.isHasChildren(e)) {
nextLevelNodes = nextLevelNodes.concat(e.children);
}
}
// 令当前层节点集合的引用指向下一层节点的集合。
currentLevelNodes = nextLevelNodes;
}
return r;
},
traverseTree(node, callback) {
if (!node) {
return;
}
var stack = [];
stack.push(node);
var tmpNode;
while (stack.length > 0) {
tmpNode = stack.pop();
callback(tmpNode);
if (tmpNode.children && tmpNode.children.length > 0) {
for (let i = tmpNode.children.length - 1; i >= 0; i--) {
stack.push(tmpNode.children[i]);
}
}
}
},
// 判断当前节点是否存在孩子节点
isHasChildren(nod){
let flag = false;
if (nod.children && nod.children.length > 0) {
flag = true;
}
return flag;
},
//设置名字
setagentNam(row) {
return (
row.agentName +
(row.children ? " (" + row.children.length + ")" : "(0)")
);
},
}
}
</script>
更多推荐
已为社区贡献2条内容
所有评论(0)