Iview元件庫之tree
讓我們看一下實現的效果
通過Iview元件庫中的tree的on-select-change事件實現。 點選樹節點時觸發，可以返回當前已選中的節點陣列、當前項
我們需要寫兩個元件
樹元件
三個按鈕，一個用來新增，一個用來修改，一個用來刪除
<template>
<Card ref="cardTable">
<Button type="info" size="small" icon="md-add" @click="handleAdd(currentNode,currentRoot)">新增</Button>
<Button type="primary" size="small" icon="md-create" @click="handleEdit(currentNode,currentRoot)">修改</Button>
<Button type="error" size="small" icon="md-close" @click="handleDelete(currentNode,currentRoot)">刪除</Button>
<tree :data="treeData" @on-select-change="handleSelectChange" ref="tree">
</tree>
<ColumnFormModal
:currentColumnParent="currentColumnParent"
:currentNodeKey="currentNodeKey"
:showModal="showModal"
:treeObj="treeObj"
@modal-visible-change="modalVisibleChange"
></ColumnFormModal>
</Card>
</template>
<script>
import ColumnFormModal from './ColumnFormModal'
export default {
name: 'Column',
components: {
ColumnFormModal
},
data () {
return {
// 用來給tree的data屬性賦值
treeData: [],
// 用來接收後臺傳來的樹List
treeList: null,
// 編輯模態框
showModal: false,
// 選中的當前node
currentNode: {},
// 選中的樹的根節點
currentRoot: {},
// 樹物件
treeObj: {},
// 當前選中節點的nodeKey
currentNodeKey: 0,
// 當前選中節點的父節點的nodeKey
currentColumnParent: 0
}
},
props: {},
computed: {},
methods: {
// 響應彈窗的變化
modalVisibleChange (visible) {
this.showModal = visible
// 遞迴查詢樹結構
this.initTreeList()
},
// 選中樹節點觸發的方法
handleSelectChange (root, node) {
this.currentNode = node
this.currentRoot = root
},
// 新增按鈕觸發的方法
handleAdd (currentNode) {
console.log(currentNode)
// 宣告一個陣列
let treeNode = currentNode.children ? currentNode.children : []
// console.log(treeNode)
// 宣告一個物件
let column = {}
// 新增節點，新增的節點的名字是 ‘新增節點’
// 修改名字需要點選修改按鈕
treeNode.push({
title: '新增節點',
parent: currentNode.id,
expend: true,
isEdit: false,
children: []
})
column.columnTitle = treeNode[treeNode.length - 1].title
column.columnParent = treeNode[treeNode.length - 1].parent
column.childColumn = []
column.nodeKey = currentNode.nodeKey
console.log(column)
this.saveOrUpdateColumn(column)
},
// 編輯按鈕觸發的方法
handleEdit (currentNode, currentRoot) {
this.showModal = true
this.treeObj = Object.assign({}, currentNode)
console.log(currentNode)
this.currentColumnParent = currentNode.columnParent
this.currentNodeKey = currentNode.nodeKey
console.log(this.currentColumnParent)
console.log(this.currentNodeKey)
},
// 刪除按鈕觸發的方法
handleDelete (currentNode, currentRoot) {
let id = currentNode.id
this.deleteColumn(id)
this.initTreeList()
},
// 查詢樹結構
initTreeList () {
this.axios.request('GET', '介面').then(response => {
if (response.status === 200) {
this.treeList = response.data
this.getTree(this.treeList)
this.treeData = this.treeList
}
})
},
// 遞迴解析樹結構
getTree (parents) {
if (parents === undefined) {
return
}
parents.forEach(item => {
item.title = item.columnTitle
item.children = item.childColumn
this.getTree(item.childColumn)
})
},
// 呼叫後臺新增或者編輯的介面
// 引數是實體
saveOrUpdateColumn (column) {
this.axios.request('POST', '介面', column).then((response) => {
let status = response.status
if (status === 200) {
this.initTreeList()
} else {
// 提示錯誤
let errorMsg = '[' + response.errorCode + ']:' + response.errorMsg
this.$Notice.error({
title: '錯誤',
desc: errorMsg,
duration: 5
})
}
})
},
// 呼叫後臺刪除的介面
// 根據id刪除
deleteColumn (id) {
this.axios.request('POST', '介面', {id}).then(response => {
let status = response.status
if (status === 200) {
this.initTreeList()
} else {
// 提示錯誤
let errorMsg = '[' + response.errorCode + ']:' + response.errorMsg
this.$Notice.error({
title: '錯誤',
desc: errorMsg,
duration: 5
})
}
})
}
},
watch: {
showModal (val) {
this.visible = val
},
visible (val) {
this.$emit('modal-visible-change', val)
}
},
created () {
// 查詢樹
this.initTreeList()
},
mounted () {
}
}
</script>
<style>
</style>
複製程式碼模態框
<template>
<div>
<Modal
v-model="visible"
title='編輯'
@on-visible-change="visibleChange"
:mask-closable="false">
<Form ref="form" :model="columnModal" :label-with="80">
<FormItem prop="columnTitle" label="欄目名稱">
<Input v-model="columnModal.columnTitle"/>
</FormItem>
</Form>
<div slot="footer">
<Button @click="cancel" :disabled="requestLoading">取消</Button>
<Button type="primary" @click="submit" :loading="requestLoading">{{requestLoading ? '正在提交' : '提交'}}</Button>
</div>
</Modal>
</div>
</template>
<script>
import {mapGetters} from 'vuex'
export default {
name: 'ColumnFormModal',
components: {},
data () {
return {
visible: false,
columnModal: {}
}
},
props: {
showModal: {
type: Boolean,
required: true
},
processObj: {
type: Object,
required: false
},
currentNodeKey: {
type: Number | Object,
required: true
},
currentColumnParent: {
type: Number | Object,
required: true
}
},
computed: {
...mapGetters([
'requestLoading'
])
},
methods: {
// 響應顯示與否
visibleChange (status) {
// 顯示時初始化動作
if (status) {
} else {
// 關閉時丟擲事件
this.$emit('modal-visible-change', false)
}
},
// 提交
submit () {
this.$refs['form'].validate((valid) => {
if (valid) {
this.columnModal.columnParent = this.currentColumnParent
this.columnModal.nodeKey = this.currentNodeKey
console.log(this.columnModal)
this.axios.request('POST', 'message/column/saveOrUpdateColumn', this.columnModal).then((response) => {
let status = response.status
if (status === 200) {
this.$Notice.success({
title: '欄目編輯' + '成功',
duration: 3
})
this.$emit('on-oper-success', this.columnModal)
} else {
// 提示錯誤
let errorMsg = '[' + response.errorCode + ']:' + response.errorMsg
this.$Notice.error({
title: '欄目編輯' + '失敗',
desc: errorMsg,
duration: 5
})
}
}).finally(() => {
this.visible = false
})
}
})
},
cancel () {
this.visible = false
// 清空校驗資訊
this.$refs['form'].resetFields()
// 關閉時丟擲事件
this.$emit('modal-visible-change', false)
}
},
watch: {
showModal (val) {
this.visible = val
this.columnModal = Object.assign({}, this.treeObj)
},
visible (val) {
this.$emit('modal-visible-change', val)
}
},
created () {},
mounted () {}
}
</script>
<style>
</style>
複製程式碼github github.com/zhangzhemin…