Vue 를 사용 하여 트 리 구성 요소 의 예제 구현
<!DOCTYPE html>
<html>
<head>
<title>Vue Demo</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
/* span */
.treeviewitem-span {
font-size: 14px;
}
/* */
.treeviewitem-arrow-icon {
margin-top: 3px;
margin-left: 3px;
margin-right: 3px;
float: left;
width: 0;
height: 0;
border-top-width: 6px;
border-right-width: 0px;
border-bottom-width: 6px;
border-left-width: 6px;
border-style: solid;
border-color: transparent transparent transparent #666666;
transform: rotate(0deg);
}
/* 90 */
.treeviewitem-arrow-icon90 {
margin-top: 3px;
margin-left: 3px;
margin-right: 3px;
float: left;
width: 0;
height: 0;
border-top-width: 6px;
border-right-width: 0px;
border-bottom-width: 6px;
border-left-width: 6px;
border-style: solid;
border-color: transparent transparent transparent #666666;
transform: rotate(90deg);
}
/* */
template {
display: none;
}
</style>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<!-- treeviewitem -->
<template id="treeviewitem">
<div>
<div style="background-color:transparent; cursor:default; height:25px;"><div v-on:click="expand" style="width:16px; height:16px; float:left; background-color:transparent;"><span v-bind:class="[self.expand ? 'treeviewitem-arrow-icon90':'treeviewitem-arrow-icon']" v-if="isLeaf"></span></div><input type="checkbox" v-on:click="checkboxClick" v-model="self.selected" /><span v-on:click="itemClick" class="treeviewitem-span">{{ self.name }}</span></div>
<div v-if="self.expand" v-for="item in items" style="margin-left:20px;">
<treeviewitem v-bind:items="item.items" v-bind:self="item"></treeviewitem>
</div>
</div>
</template>
<!-- treeview -->
<template id="treeview">
<div>
<div v-for="item in items">
<treeviewitem v-bind:items="item.items" v-bind:self="item"></treeviewitem>
</div>
</div>
</template>
<div id="app">
<!-- treeview -->
<treeview v-bind:items="items"></treeview>
<br />
<button onclick="showSelectedResult()"> </button>
</div>
<script type="text/javascript">
// treeviewitem
Vue.component('treeviewitem', {
props: ['items', 'self'],
template: '#treeviewitem',
methods: {
itemClick: function (d) {
alert(" :" + this.self.name);
},
checkboxClick: function (e) {
var checkChild;
checkChild = function (items, checked) {
for (var i = 0; i < items.length; i++) {
var item = items[i];
item.selected = checked;
if (item.items) {
checkChild(item.items, checked)
}
}
};
if (e.target.checked) {
checkChild(this.items, true);
} else {
checkChild(this.items, false);
}
},
expand: function (e) {
if (this.self.expand) {
this.self.expand = false;
} else {
this.self.expand = true;
}
}
},
computed: {
isLeaf: function () {
if (this.items && this.items.length > 0) {
return true;
}
return false;
}
}
});
// treeview
Vue.component('treeview', {
props: ['items'],
template: '#treeview'
});
// vm
var vm = new Vue({
el: '#app',
methods: {
/**
* @description
*/
getSelected: function (items) {
if (!items) items = this.items;
var result = [];
for (var i = 0; i < items.length; i++) {
var item = items[i];
if (item.selected) {
result.push(item.name);
}
if (item.items) {
var childSelected = this.getSelected(item.items);
for (var k = 0; k < childSelected.length; k++) {
result.push(childSelected[k]);
}
}
}
return result;
}
},
data: {
items: [
{
name: ' 1',
expand: true,
selected: false,
items: [
{
name: ' 11',
expand: true,
selected: false,
items: [
{
name: ' 111',
expand: true,
selected: true,
}
]
},
{
name: ' 12',
expand: false,
selected: false,
items: [
{
name: ' 121',
expand: true,
selected: false,
},
{
name: ' 122',
expand: true,
selected: false,
items: [
{
name: ' 1221',
expand: true,
selected: false
},
{
name: ' 1222',
expand: true,
selected: false
}
]
}
]
},
{
name: ' 13',
expand: true,
selected: false
}
]
},
{
name: ' 2',
expand: true,
selected: false
},
{
name: ' 3',
expand: true,
selected: false,
items: [
{
name: " 31",
expand: true,
selected: false
}
]
}
]
}
})
//
function showSelectedResult() {
var selected = vm.getSelected();
alert(" :" + selected.join(', '));
}
</script>
</body>
</html>
효과 그림:이상 은 Vue 를 사용 하여 트 리 구성 요 소 를 구현 하 는 예제 에 대한 상세 한 내용 입 니 다.vue 구현 트 리 구성 요소 에 대한 자 료 는 다른 관련 글 을 주목 하 십시오!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.