vue中el-tree結(jié)合el-switch實(shí)現(xiàn)開關(guān)狀態(tài)切換
更新時(shí)間：2023年12月13日 15:06:15 作者：Zwq8023520
本文主要介紹了vue中el-tree結(jié)合el-switch實(shí)現(xiàn)開關(guān)狀態(tài)切換,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
本文主要介紹了vue中el-tree結(jié)合el-switch實(shí)現(xiàn)開關(guān)狀態(tài)切換，具體如下：
<template>
<div>
<el-col :span="24">
<el-card class="tree-card">
<div class="sketch_content selectFile">
<span class="span_title">組織列表 </span>
<div style="display: flex; justify-content: flex-end; width: 55vw">
<div
style="display: flex; align-items: center; margin-right: 1.5vw"
>
<el-radio-group v-model="filterType" @change="radioChange">
<el-radio :label="'all'">顯示全部</el-radio>
<el-radio :label="'on'">只顯示開啟</el-radio>
<el-radio :label="'off'">只顯示關(guān)閉</el-radio>
</el-radio-group>
</div>
<el-button type="primary" size="small" @click="oneClickEnables"
>一鍵啟用</el-button
>
</div>
<el-tree
style="margin-top: 20px; width: 55vw"
:data="organizationTreeData"
node-key="id"
default-expand-all
:expand-on-click-node="false"
v-if="
organizationTreeData.length !== 0 && organizationTreeData !== ''
"
draggable
@node-click="getOrganizationList"
@drag-start="handleDragStart"
@allow-drop="allowDrop"
@drag-end="handleDragEnd"
@node-drop="handleNodeDrop"
@allow-drag="allowDrag"
>
<span class="custom-tree-node" slot-scope="{ node, data }">
<span>{{ node.label }}</span>
<div
v-if="data.type !== 1"
style="
display: flex;
justify-content: center;
align-items: center;
"
>
<el-button
type="text"
icon="el-icon-plus"
class="edit"
@click="showOrganizationDialog"
>
</el-button>
<el-tooltip
class="item"
effect="dark"
content="修改組織"
placement="top"
>
<el-button
type="text"
@click="() => showEditOrganizationDialog(data)"
icon="el-icon-edit"
class="edit"
style="margin-right: 2vw"
>
</el-button>
</el-tooltip>
<el-switch
slot="reference"
style="display: block"
v-model="node.data.organizeStatus"
active-color="#13ce66"
inactive-color="#cccccc"
:active-value="0"
:inactive-value="1"
active-text="啟用"
inactive-text="禁用"
@change="statusChange(node)"
>
</el-switch>
</div>
</span>
</el-tree>
<div
v-if="
organizationTreeData.length == 0 || organizationTreeData == ''
"
>
<el-empty description="暫無組織" />
<el-button
type="primary"
size="small"
@click="showDialog"
v-if="add"
>添加組織</el-button
>
</div>
</div>
</el-card>
</el-col>
<el-dialog
width="580px"
:visible.sync="addOrganizationDialogVisible"
:close-on-click-modal="false"
@close="closeOrganizationTreeDialog"
>
<div class="addOrganizationDialog">
<span>新增組織</span>
</div>
<el-divider class="dialog_divider"></el-divider>
<el-form
:model="organizationForm"
ref="addFileBackupTaskForm"
label-width="100px"
style="height: auto"
>
<el-form-item label="組織代碼：" style="margin-left: -19px">
<el-input
v-model="organizationForm.id"
size="mini"
style="width: 200px; margin-left: -170px"
></el-input>
</el-form-item>
<el-form-item label="上級組織：" style="margin-left: -19px">
<el-input
v-model="organizationForm.lead"
size="mini"
style="width: 200px; margin-left: -170px"
></el-input>
</el-form-item>
<el-form-item
label="組織名稱："
prop="fileIp"
style="margin-left: -19px"
>
<el-input
v-model="organizationForm.organizationName"
placeholder="請輸入組織名稱"
size="mini"
style="width: 200px; margin-left: -170px"
></el-input>
</el-form-item>
<!-- <el-form-item
label="上級組織："
prop="fileIp"
style="margin-left: -19px"
>
<el-select
placeholder="請選擇上級組織"
style="width: 200px; margin-left: -170px"
size="mini"
>
<el-option label="部門1" value="0"></el-option>
<el-option label="部門2" value="1"></el-option>
<el-option label="生態(tài)單位1" value="2"></el-option>
</el-select>
</el-form-item> -->
<el-form-item
label="組織類型："
prop="fileType"
style="margin-left: -19px"
>
<el-select
style="width: 200px; margin-left: -170px"
v-model="value1"
@change="select"
>
<el-option
v-for="item in options1"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
</el-form>
<el-divider></el-divider>
<div class="dialogClose">
<el-button @click="closeOrganizationTreeDialog">取消</el-button>
<el-button type="primary" @click="addOrganization">確定</el-button>
</div>
</el-dialog>
<el-dialog
width="580px"
:visible.sync="visible"
:close-on-click-modal="false"
@close="closeOrganizationTreeDialog"
>
<div class="addOrganizationDialog">
<span>新增組織</span>
</div>
<el-divider class="dialog_divider"></el-divider>
<el-form
:model="organizationForm"
ref="addFileBackupTaskForm"
label-width="100px"
style="height: auto"
>
<el-form-item
label="組織名稱："
prop="fileIp"
style="margin-left: -19px"
>
<el-input
v-model="organizationForm.organizationName"
placeholder="請輸入組織名稱"
size="mini"
style="width: 200px; margin-left: -170px"
></el-input>
</el-form-item>
<el-form-item
label="組織類型："
prop="fileType"
style="margin-left: -19px"
>
<el-select
style="width: 200px; margin-left: -170px"
v-model="value1"
@change="select"
>
<el-option
v-for="item in options1"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
</el-form>
<el-divider></el-divider>
<div class="dialogClose">
<el-button @click="closeOrganizationTreeDialog">取消</el-button>
<el-button type="primary" @click="addOrganization1">確定</el-button>
</div>
</el-dialog>
<!-- 組織修改模塊-->
<el-dialog
width="580px"
:visible.sync="editOrganizationDialogVisible"
:close-on-click-modal="false"
@close="closeEditOrganizationDialog"
>
<div class="addOrganizationDialog">
<span>修改組織</span>
</div>
<el-divider class="dialog_divider"></el-divider>
<el-form
:model="organizationForm"
ref="addFileBackupTaskForm"
label-width="100px"
style="height: auto"
>
<el-form-item label="組織名稱" prop="fileIp" style="margin-left: -19px">
<el-input
v-model="organizationForm.organizationName"
placeholder="請輸入組織名稱"
size="mini"
style="width: 200px; margin-left: -170px"
></el-input>
</el-form-item>
<el-form-item
label="組織類型"
prop="fileType"
style="margin-left: -19px"
>
<el-select
v-model="value"
style="width: 200px; margin-left: -170px"
:placeholder="placeholder"
@change="change"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
</el-form>
<el-divider></el-divider>
<div class="dialogClose">
<el-button @click="closeEditOrganizationDialog">取消</el-button>
<el-button type="primary" @click="editOrganization">確定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
getOrganizeList,
restartOrganize,
forbiddenOrganize,
editOrganize,
addOrganize,
changeOrganize,
oneClickEnable,
} from '@/api/index'
let id = 1000
export default {
name: 'OrganizeMaintain',
data() {
return {
value: '',
see: true,
placeholder: '請選擇',
add: true,
options: [
{ value: 0, label: '集團(tuán)' },
{ value: 1, label: '子集團(tuán)' },
{ value: 2, label: '公司' },
{ value: 3, label: '部門' },
{ value: 4, label: '生態(tài)單位' },
],
options1: [
{ value: 0, label: '集團(tuán)' },
{ value: 1, label: '子集團(tuán)' },
{ value: 2, label: '公司' },
{ value: 3, label: '部門' },
{ value: 4, label: '生態(tài)單位' },
],
organizationTreeData: [],
sectionList: [
{
id: 1,
name: '部門1',
},
{
id: 2,
name: '部門2',
},
{
id: 3,
name: '部門3',
},
{
id: 4,
name: '生態(tài)單位',
},
],
userList: [
{
id: 1,
username: 'zzn',
},
],
sectionUserList: [
{
id: 1,
name: '用戶1',
},
{
id: 2,
name: '用戶2',
},
{
id: 3,
name: '用戶3',
},
],
addOrganizationDialogVisible: false,
organizationForm: {
organizationName: '',
id: '',
lead: '',
},
addTopOrganizationDialogVisible: false,
// 節(jié)點(diǎn)的data
organizationDialogData: '',
editOrganizationDialogVisible: false,
listTitle: '',
data: [],
type: 'text',
node: '',
organizeType: '',
value1: '',
addOrganizeType: '',
draggedNode: null,
visible: false,
filterType: 'all',
}
},
mounted() {
this.getOrganizationList()
getOrganizeList({ viewType: 2 })
},
methods: {
async radioChange(value) {
if (value == 'on') {
this.add = false
const res = await getOrganizeList({ viewType: 0 })
this.organizationTreeData = [res.data.data[0]]
} else if (value == 'off') {
this.add = false
const res = await getOrganizeList({ viewType: 1 })
this.organizationTreeData = []
this.organizationTreeData = [].concat(...res.data.data)
console.log(this.organizationTreeData)
} else {
const res = await getOrganizeList({ viewType: 2 })
this.organizationTreeData = [res.data.data[0]]
}
},
getOrganizationList(data, node) {
this.data = data
this.node = node
// this.listTitle = data.label
// }
},
showOrganizationDialog() {
setTimeout(() => {
this.organizationForm.id = this.node.data.id
this.organizationForm.lead = this.node.data.label
})
// this.organizationForm.id = this.node.parent.data.id
// this.organizationForm.lead = this.node.parent.data.label
this.addOrganizationDialogVisible = true
},
closeOrganizationTreeDialog() {
this.addOrganizationDialogVisible = false
this.visible = false
this.organizationForm.organizationName = ''
this.organizationForm.id = ''
this.organizationForm.lead = ''
this.value = ''
this.value1 = ''
},
showEditOrganizationDialog() {
this.editOrganizationDialogVisible = true
setTimeout(() => {
this.organizationForm.organizationName = this.data.label
if (this.data.organizeType == 0) {
this.placeholder = '集團(tuán)'
} else if (this.data.organizeType == 1) {
this.placeholder = '子集團(tuán)'
} else if (this.data.organizeType == 2) {
this.placeholder = '公司'
} else if (this.data.organizeType == 3) {
this.placeholder = '部門'
} else if (this.data.organizeType == 4) {
this.placeholder = '生態(tài)單位'
}
}, 0)
},
showDialog() {
this.visible = true
},
closeEditOrganizationDialog() {
this.editOrganizationDialogVisible = false
this.organizationForm.organizationName = ''
},
// 新增組織
async addOrganization() {
const organizeName = this.organizationForm.organizationName
const parentOrganize = this.organizationForm.id
let organizeType = this.addOrganizeType
if (organizeType == '集團(tuán)') {
organizeType = 0
} else if (organizeType == '子集團(tuán)') {
organizeType = 1
} else if (organizeType == '公司') {
organizeType = 2
} else if (organizeType == '部門') {
organizeType = 3
} else if (organizeType == '生態(tài)單位') {
organizeType = 4
}
addOrganize({
organizeName,
parentOrganize,
organizeType,
}).then((res) => {
if (res.data.status == 200) {
this.$message({
message: res.data.message,
type: 'success',
})
} else {
this.$message({
message: res.data.message,
type: 'error',
})
}
const newChild = {
id: id++,
label: this.organizationForm.organizationName,
children: [],
}
this.data.children.push(newChild)
getOrganizeList({ viewType: 2 }).then(
(res) => (this.organizationTreeData = [res.data.data[0]])
)
this.organizationForm.organizationName = ''
this.value1 = ''
this.value = ''
this.organizationForm.id = ''
this.organizationForm.lead = ''
this.organizeType = ''
this.addOrganizationDialogVisible = false
})
},
async addOrganization1() {
const organizeName = this.organizationForm.organizationName
const parentOrganize = this.organizationForm.id
let organizeType = this.addOrganizeType
if (organizeType == '集團(tuán)') {
organizeType = 0
} else if (organizeType == '子集團(tuán)') {
organizeType = 1
} else if (organizeType == '公司') {
organizeType = 2
} else if (organizeType == '部門') {
organizeType = 3
} else if (organizeType == '生態(tài)單位') {
organizeType = 4
}
const res = await addOrganize({
organizeName,
parentOrganize,
organizeType,
})
const newChild = {
id: id++,
label: this.organizationForm.organizationName,
children: [],
}
this.data = []
this.data.push(newChild)
const res1 = await getOrganizeList({ viewType: 2 })
this.organizationTreeData = [res1.data.data[0]]
this.visible = false
// this.organizationForm.organizationName = ''
// this.value = ''
// this.organizationForm.id = ''
// this.organizationForm.lead = ''
},
// 組織修改
async editOrganization() {
this.editOrganizationDialogVisible = false
const id = this.data.id
const organizeName = this.organizationForm.organizationName
const organizeType = this.organizeType
this.data.label = this.organizationForm.organizationName
editOrganize({ id, organizeName, organizeType }).then((res) => {
if (res.data.status === 200) {
this.$message({
message: res.data.message,
type: 'success',
})
} else {
this.$message({
message: res.data.message,
type: 'error',
})
}
})
const res1 = await getOrganizeList({ viewType: 2 })
this.organizationTreeData = [res1.data.data[0]]
},
// 組織停用啟用
async statusChange(node) {
setTimeout(() => {
const organizeId = this.node.data.id
const organizeName = this.node.data.organizeName
console.log(node.data.organizeStatus)
if (this.node.data.organizeStatus == 0) {
restartOrganize({ organizeId, organizeName }).then((res) => {
if (res.data.status == 200) {
this.$message({
message: res.data.message,
type: 'success',
})
} else {
this.$message({
message: res.data.message,
type: 'error',
})
}
getOrganizeList({ viewType: 2 }).then((res) => {
console.log(res.data.data[0])
this.organizationTreeData = [res.data.data[0]]
})
})
} else {
forbiddenOrganize({ organizeId, organizeName }).then((res) => {
if (res.data.status == 200) {
this.$message({
message: res.data.message,
type: 'success',
})
} else {
this.$message({
message: res.data.message,
type: 'error',
})
}
getOrganizeList({ viewType: 2 }).then((res) => {
this.organizationTreeData = [res.data.data[0]]
})
})
}
}, 0)
},
getSwitchValue(node) {
// Convert numeric value to boolean
return node.data.organizeStatus
},
oneClickEnables() {
oneClickEnable().then((res) => {
if (res.data.status == 200) {
this.$message({
message: res.data.message,
type: 'success',
})
getOrganizeList({ viewType: 2 }).then((res) => {
console.log(res.data.data[0])
this.organizationTreeData = [res.data.data[0]]
})
} else {
this.$message({
message: res.data.message,
type: 'error',
})
}
})
},
// 獲取修改組織類型
change() {
const selectedLabel = this.options.find(
(item) => item.value === this.value
)?.value
this.organizeType = selectedLabel
},
// 獲取新增組織類型
select() {
const selectedLabel = this.options1.find(
(item) => item.value === this.value1
)?.label
this.addOrganizeType = selectedLabel
},
// 拖拽節(jié)點(diǎn)事件
handleDragStart(draggingNode) {
// 在拖拽開始時(shí)檢查節(jié)點(diǎn)位置
// 如果拖拽的節(jié)點(diǎn)是頂層節(jié)點(diǎn)并且已經(jīng)有一個(gè)頂層節(jié)點(diǎn)存在，禁止拖拽
if (draggingNode.level === 1 && this.hasTopLevelNode()) {
this.draggable = false
} else {
this.draggable = true
}
},
// 檢查是否已經(jīng)有一個(gè)頂層節(jié)點(diǎn)
hasTopLevelNode() {
return this.organizationTreeData.some((node) => node.level === 1)
},
handleDragEnd() {
this.draggable = true
},
// 允許拖拽的條件
allowDrop(draggingNode, dropNode, type) {
// 如果拖拽的節(jié)點(diǎn)是頂層節(jié)點(diǎn)，不允許放置
if (draggingNode.level === 1) {
return false
}
// 如果拖拽的節(jié)點(diǎn)不是頂層節(jié)點(diǎn)但目標(biāo)節(jié)點(diǎn)是頂層節(jié)點(diǎn)的同級，不允許放置
if (draggingNode.level > 1 && dropNode.level === 1) {
return false
}
// 其他情況允許放置
return true
},
allowDrag(draggingNode, dropNode, type) {
// 如果拖拽的節(jié)點(diǎn)是頂層節(jié)點(diǎn)，不允許放置
// if (draggingNode.level === 1) {
// return false
// }
// 如果拖拽的節(jié)點(diǎn)不是頂層節(jié)點(diǎn)但目標(biāo)節(jié)點(diǎn)是頂層節(jié)點(diǎn)的同級，不允許放置
// if (draggingNode.level > 1 && dropNode.level === 1) {
// return false
// }
// 其他情況允許放置
// return true
},
handleNodeDrop(draggingNode, dropNode, type) {
// 在這里可以獲取拖拽后節(jié)點(diǎn)的父節(jié)點(diǎn)
const parentNode = dropNode.parent
const currentOrganize = draggingNode.data.id
const targetOrganize = dropNode.data.id
changeOrganize({ currentOrganize, targetOrganize })
},
},
watch: {
// 監(jiān)聽拖拽后節(jié)點(diǎn)的變化
draggedNode(newNode) {
if (newNode) {
// 這里可以訪問拖拽后節(jié)點(diǎn)的父節(jié)點(diǎn)
const parentNode = newNode.parent
}
},
},
computed: {
filteredOrganizationTreeData() {
// Filter out nodes with organizeStatus !== 0 (禁用)
return this.organizationTreeData.filter((node) => {
return node.data.organizeStatus === 0
})
},
},
async created() {
const res = await getOrganizeList({ viewType: 2 })
this.organizationTreeData = [res.data.data[0]]
console.log([res.data.data[0]])
},
}
</script>
<style scoped lang="scss">
.edit {
width: 5vw;
}
.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
/*font-size: 15px;*/
padding-right: 8px;
}
.selectFile {
line-height: 19px;
}
.tree-card {
overflow-y: auto; /* 開啟滾動(dòng)顯示溢出內(nèi)容 */
width: 90%;
height: 80vh;
margin-left: 4vw;
overflow-x: auto;
}
/*滾動(dòng)條樣式*/
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-thumb {
background-color: #40b8ff;
border-radius: 3px;
}
.el-tree-node__label {
font-size: 50px;
}
.list-card {
overflow-y: auto; /* 開啟滾動(dòng)顯示溢出內(nèi)容 */
width: 98%;
height: 80vh;
}
/* 查詢*/
.select-organization {
margin-top: -33px;
display: flex;
justify-content: right;
line-height: 30px;
}
.findButton,
.reset {
margin-top: 58px;
height: 40px;
width: 8%;
}
.selectEvent {
margin-right: 30px;
margin-top: 58px;
}
.list-span {
font-family: 微軟雅黑;
font-size: 20px;
height: 100px;
font-weight: bold;
color: #525252;
display: flex;
line-height: 100px;
}
::v-deep .el-collapse-item__header {
font-size: 17px;
font-weight: bold;
}
.addOrganizationDialog {
font-size: 20px;
text-align: left;
margin-top: -105px;
}
.dialog_divider {
margin-top: -50px;
}
.dialogClose {
text-align: right;
margin-top: -75px;
margin-bottom: -80px;
}
.span_title {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
color: #222222;
font-size: 17px;
font-weight: bold;
}
/*解決table展開時(shí)高度異常問題*/
::v-deep .el-table__header {
width: 100% !important;
}
::v-deep .el-table__body {
width: 100% !important;
}
</style>到此這篇關(guān)于vue中el-tree結(jié)合el-switch實(shí)現(xiàn)開關(guān)狀態(tài)切換的文章就介紹到這了,更多相關(guān)vue開關(guān)狀態(tài)切換內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
npm?install安裝報(bào)錯(cuò)的幾種常見情況
當(dāng)你跑起一個(gè)項(xiàng)目的時(shí)候,第一步需要先安裝依賴npm install,下面這篇文章主要給大家介紹了關(guān)于npm?install安裝報(bào)錯(cuò)的幾種常見情況,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
vue路由緩存的幾種實(shí)現(xiàn)方式小結(jié)
這篇文章主要介紹了vue路由緩存的幾種實(shí)現(xiàn)方式,結(jié)合實(shí)例形式詳細(xì)分析了vue.js路由緩存常見實(shí)現(xiàn)方式、使用技巧與操作注意事項(xiàng),需要的朋友可以參考下2020-02-02
vue-electron使用serialport時(shí)問題解決方案
這篇文章主要介紹了vue-electron使用serialport時(shí)問題解決方案,本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
vue實(shí)現(xiàn)標(biāo)簽云效果的示例
這篇文章主要介紹了vue實(shí)現(xiàn)標(biāo)簽云效果的示例，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-11-11
vue中的diff算法時(shí)常是面試過程中的考點(diǎn),本文將為大家講解何為diff以及diff算法的實(shí)現(xiàn)過程,那么在了解diff之前,我們需要先了解虛擬DOM是什么,需要的朋友可以參考下2024-02-02
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)拖拽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
在vue中，子組件如果想修改父組件的變量，一般做法是通過綁定事件的方法，父組件向子組件傳遞修改變量的方法，子組件觸發(fā)修改變量的方法執(zhí)行，這種方式中規(guī)中矩；另一種方法是使用sync修飾符，此方法可以減少很多代碼量2022-08-08
在Vue項(xiàng)目中,Axios是一個(gè)非常流行的HTTP客戶端,用于發(fā)送請求和接收響應(yīng),Axios攔截器是Axios的一個(gè)強(qiáng)大功能,它允許你在請求發(fā)送之前和響應(yīng)返回之后對請求和響應(yīng)進(jìn)行處理和攔截,本文將結(jié)合實(shí)際案例,詳細(xì)介紹如何在Vue中使用Axios攔截器,需要的朋友可以參考下2024-12-12
vue2之響應(yīng)式雙向綁定,在對象或數(shù)組新增屬性頁面無響應(yīng)的情況
這篇文章主要介紹了vue2之響應(yīng)式雙向綁定,在對象或數(shù)組新增屬性頁面無響應(yīng)的情況及解決，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
vue3中require報(bào)錯(cuò)require is not defined問題及解決
這篇文章主要介紹了vue3中require報(bào)錯(cuò)require is not defined問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06