如何使用el-table+el-tree+el-select動態(tài)選擇對應(yīng)值
更新時間：2023年01月15日 14:47:31 作者：紫米粥
小編在做需求時,遇到了在el-table表格中加入多條數(shù)據(jù),并且每條數(shù)據(jù)要通過el-select來選取相應(yīng)的值,做到動態(tài)選擇,下面這篇文章主要給大家介紹了關(guān)于如何使用el-table+el-tree+el-select動態(tài)選擇對應(yīng)值的相關(guān)資料,需要的朋友可以參考下
使用el-table+el-select+el-tree來實現(xiàn)element中el-table表格動態(tài)選擇對應(yīng)值
背景描述：
項目組的老大讓我們完成一個選擇一個下拉框中的值，然后再動態(tài)選擇該下拉框中樹形結(jié)構(gòu)的數(shù)值，說起來有點繞，給大家截個圖，大家就一目了然了。
其實這個功能的實現(xiàn)主要借助與el-table、el-tree、el-select這三個組件就可以實現(xiàn)。
我碰到的問題：
（1）el-tree數(shù)據(jù)不顯示。
（2）el-tree顯示數(shù)據(jù)后無法綁定某一行。
（3）el-tree不能及時同步顯示數(shù)據(jù)。
但是一開始做的時候一頭霧水，因為我是做后端的，其實對前端的知識真的了解的不多，所以，在苦心鉆研了一天終于參考了一篇大神的博客，成功解決的這個問題。
在這里附上原文地址：http://www.dhdzp.com/article/272778.htm
解決問題：
根據(jù)大神的文章，我對其中的方法進(jìn)行了主要的修改，然后按照大神的邏輯，重新修改了頁面，發(fā)現(xiàn)就成功了，在這里具體什么原因其實我也不知道，但是在這里附上源碼，方便大家進(jìn)行參考。
其實核心主要是三大方面：
（1）第一步，選中下拉框，獲取樹形數(shù)據(jù)。
<el-form>
<el-form-item label="用戶地址" prop="aloWhTo">
<el-select v-model="form.aloWhTo" @change="testConsistent" placeholder="" readonly filterable style="width:95%" >
<el-option v-for="item in WarehouseOptions" :key="item.whId" :label="item.whName" :value="item.whId">
</el-option>
</el-select>
</el-form-item>
</el-form>
補(bǔ)充：大家在前端指導(dǎo)如何把數(shù)據(jù)轉(zhuǎn)成樹形結(jié)構(gòu)嗎？
其實很簡單：只需要借助于handleTree（）方法即可，但是在合理提前是你查詢的數(shù)據(jù)是包含這種父子關(guān)系的字段的，比如我這里的wliFd這個字段就很關(guān)鍵。
listWarehouseLocationInfo(this.queryParamsByLocation).then(response => {
this.WarehouseLocationInfoList = this.handleTree(response.data, 'wliId', 'wliFId')
console.log("我是最終要返回的數(shù)據(jù)")
console.log(this.WarehouseLocationInfoList)
})
（2）通過@change="testConsistent"獲取樹形結(jié)構(gòu)數(shù)據(jù)treeList，在這里我主要是模擬的樹形數(shù)據(jù)。
{
"searchValue": null,
"createBy": null,
"createTime": "2022-10-13 16:39:11",
"updateBy": null,
"updateTime": "2022-10-16 15:31:23",
"remark": null,
"params": {},
"parentName": null,
"parentId": null,
"orderNum": null,
"ancestors": null,
"children": [
{
"searchValue": null,
"createBy": null,
"createTime": "2022-10-13 16:39:56",
"updateBy": null,
"updateTime": "2022-10-16 15:31:31",
"remark": null,
"params": {},
"parentName": null,
"parentId": null,
"orderNum": null,
"ancestors": null,
"wliId": 5,
"wliWhId": 28,
"warehouseInformation": {
"searchValue": null,
"createBy": null,
"createTime": null,
"updateBy": null,
"updateTime": null,
"remark": null,
"params": {},
"whId": 28,
"whCode": "2",
"whName": "原材料1號倉",
"whMnemonic": null,
"whWcId": null,
"category": null,
"whProperty": null,
"whPrincipalId": null,
"salesUser": null,
"whAddress": null,
"whIsForever": null,
"whIsVirtual": null,
"whStatus": null,
"delFlag": null,
"remarks": null,
"backup1": null,
"backup2": null,
"backup3": null
},
"wliFId": 4,
"wliCode": "cz",
"wliName": "長治",
"wliMnemonic": "ZZ",
"remarks": null
},
{
"searchValue": null,
"createBy": null,
"createTime": "2022-10-13 16:40:19",
"updateBy": null,
"updateTime": null,
"remark": null,
"params": {},
"parentName": null,
"parentId": null,
"orderNum": null,
"ancestors": null,
"wliId": 6,
"wliWhId": 28,
"warehouseInformation": {
"searchValue": null,
"createBy": null,
"createTime": null,
"updateBy": null,
"updateTime": null,
"remark": null,
"params": {},
"whId": 28,
"whCode": "2",
"whName": "原材料1號倉",
"whMnemonic": null,
"whWcId": null,
"category": null,
"whProperty": null,
"whPrincipalId": null,
"salesUser": null,
"whAddress": null,
"whIsForever": null,
"whIsVirtual": null,
"whStatus": null,
"delFlag": null,
"remarks": null,
"backup1": null,
"backup2": null,
"backup3": null
},
"wliFId": 4,
"wliCode": "ty",
"wliName": "太原",
"wliMnemonic": "TY",
"remarks": null
}
],
"wliId": 4,
"wliWhId": 28,
"warehouseInformation": {
"searchValue": null,
"createBy": null,
"createTime": null,
"updateBy": null,
"updateTime": null,
"remark": null,
"params": {},
"whId": 28,
"whCode": "2",
"whName": "原材料1號倉",
"whMnemonic": null,
"whWcId": null,
"category": null,
"whProperty": null,
"whPrincipalId": null,
"salesUser": null,
"whAddress": null,
"whIsForever": null,
"whIsVirtual": null,
"whStatus": null,
"delFlag": null,
"remarks": null,
"backup1": null,
"backup2": null,
"backup3": null
},
"wliFId": 0,
"wliCode": "sx",
"wliName": "山西",
"wliMnemonic": "SX",
"remarks": null
}
];
console.log(this.form.aloWhTo)
if(this.form.aloWhTo === 2){
this.treeList = data;
}else {
this.treeList = null;
}
},
（3）修改el-table中的el-table-column，并將el-select、el-tree進(jìn)行數(shù)據(jù)綁定，這里具體的參數(shù)大家可以參照我推薦的大神的博客，在這里我就不一一介紹了。
<el-table-column label="地址" prop="address">
<template slot-scope="scope">
<el-select
:ref="'address' + scope.$index"
v-model="userlist[scope.$index]['address']"
placeholder="請選擇地址類別"
clearable
>
<el-option :value="userlist[scope.$index]['address']" style="height: auto">
<el-tree
:ref="'addressTree' + scope.$index"
:data="treeList"
node-key="wliId"
:props="defaultPropsList"
@node-click="getTypeList(scope.$index)"
>
<span slot-scope="{ node }">{{ node.label }}</span>
</el-tree>
</el-option>
</el-select>
</template>
</el-table-column>
（4）編寫getTypeList(scope.$index)，這個方法才是核心，大家按照這個邏輯改一下ref的名字還有數(shù)據(jù)表的名字即可使用，方便快捷，并且能夠?qū)崿F(xiàn)相應(yīng)的功能。
getTypeList(index) {
// .getCurrentKey()獲取到當(dāng)前要選擇節(jié)點的key值
// 使用此方法必須設(shè)置 node-key 屬性，若沒有節(jié)點被選中則返回 null
const nodeId = this.$refs['addressTree' + index].getCurrentKey()
// .getNode(nodeId) 根據(jù) data 或者 key 拿到 Tree 組件中的 node
const node = this.$refs['addressTree' + index].getNode(nodeId)
// 根據(jù)index給當(dāng)前元素的categoryName參數(shù)賦值
this.$set(this.userlist[index], 'address', node.label)
//this.$set(this.userlist[index], 'categoryNo', node.data.docTypeNo)
// 此時頁面上已經(jīng)可以動態(tài)選擇
// 這一步是通過判斷當(dāng)前元素的v-model是否有值來控制el-option是否隱藏
if (this.userlist[index].address) {
// .blur()用來隱藏當(dāng)前展開的下拉選擇框
this.$refs['address' + index].blur()
}
},
至此到這里就全部結(jié)束了。
（5）在這里附上整個頁面的所有代碼，方便大家可以再本地進(jìn)行測試。
<template>
<div>
<!-- 面包屑導(dǎo)航區(qū)域 -->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home' }">首頁</el-breadcrumb-item>
<el-breadcrumb-item>用戶管理</el-breadcrumb-item>
<el-breadcrumb-item>用戶列表</el-breadcrumb-item>
</el-breadcrumb>
<!-- 卡片視圖區(qū)域 -->
<el-card>
<!-- 搜索與添加區(qū)域 -->
<el-row :gutter="20">
<el-col :span="8">
<el-input placeholder="請輸入內(nèi)容" v-model="queryInfo.query" clearable @clear="getUserList">
<el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>
</el-input>
</el-col>
<el-col :span="4">
<el-button type="primary" @click="addDialogVisible = true">添加用戶</el-button>
</el-col>
</el-row>
<el-form>
<el-form-item label="用戶地址" prop="aloWhTo">
<el-select v-model="form.aloWhTo" @change="testConsistent" placeholder="" readonly filterable style="width:95%" >
<el-option v-for="item in WarehouseOptions" :key="item.whId" :label="item.whName" :value="item.whId">
</el-option>
</el-select>
</el-form-item>
</el-form>
<!-- 用戶列表區(qū)域 -->
<el-table :data="userlist" border stripe>
<el-table-column type="index"></el-table-column>
<el-table-column label="姓名" prop="username"></el-table-column>
<el-table-column label="郵箱" prop="email"></el-table-column>
<el-table-column label="電話" prop="mobile"></el-table-column>
<el-table-column label="角色" prop="role_name"></el-table-column>
<el-table-column label="狀態(tài)">
<template slot-scope="scope">
<el-switch v-model="scope.row.mg_state" @change="userStateChanged(scope.row)">
</el-switch>
</template>
</el-table-column>
<el-table-column label="地址">
<template>
<el-select v-model="testValue" placeholder="請選擇" style="width:140px">
<el-option :value="treeDataValue" style="height: auto">
<el-tree :data="treeList" :props="defaultPropsList" @node-click="handleNodeClick"></el-tree>
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="地址" prop="address">
<template slot-scope="scope">
<el-select
:ref="'address' + scope.$index"
v-model="userlist[scope.$index]['address']"
placeholder="請選擇地址類別"
clearable
>
<el-option :value="userlist[scope.$index]['address']" style="height: auto">
<el-tree
:ref="'addressTree' + scope.$index"
:data="treeList"
node-key="wliId"
:props="defaultPropsList"
@node-click="getTypeList(scope.$index)"
>
<span slot-scope="{ node }">{{ node.label }}</span>
</el-tree>
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="操作" width="180px">
<template slot-scope="scope">
<!-- 修改按鈕 -->
<el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.id)"></el-button>
<!-- 刪除按鈕 -->
<el-button type="danger" icon="el-icon-delete" size="mini" @click="removeUserById(scope.row.id)"></el-button>
<!-- 分配角色按鈕 -->
<el-tooltip effect="dark" content="分配角色" placement="top" :enterable="false">
<el-button type="warning" icon="el-icon-setting" size="mini" @click="setRole(scope.row)"></el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table>
<!-- 分頁區(qū)域 -->
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum" :page-sizes="[1, 2, 5, 10]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
</el-pagination>
</el-card>
<!-- 添加用戶的對話框 -->
<el-dialog title="添加用戶" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed">
<!-- 內(nèi)容主體區(qū)域 -->
<el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px">
<el-form-item label="用戶名" prop="username">
<el-input v-model="addForm.username"></el-input>
</el-form-item>
<el-form-item label="密碼" prop="password">
<el-input v-model="addForm.password"></el-input>
</el-form-item>
<el-form-item label="郵箱" prop="email">
<el-input v-model="addForm.email"></el-input>
</el-form-item>
<el-form-item label="手機(jī)" prop="mobile">
<el-input v-model="addForm.mobile"></el-input>
</el-form-item>
</el-form>
<!-- 底部區(qū)域 -->
<span slot="footer" class="dialog-footer">
<el-button @click="addDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="addUser">確 定</el-button>
</span>
</el-dialog>
<!-- 修改用戶的對話框 -->
<el-dialog title="修改用戶" :visible.sync="editDialogVisible" width="50%" @close="editDialogClosed">
<el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px">
<el-form-item label="用戶名">
<el-input v-model="editForm.username" disabled></el-input>
</el-form-item>
<el-form-item label="郵箱" prop="email">
<el-input v-model="editForm.email"></el-input>
</el-form-item>
<el-form-item label="手機(jī)" prop="mobile">
<el-input v-model="editForm.mobile"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="editDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="editUserInfo">確 定</el-button>
</span>
</el-dialog>
<!-- 分配角色的對話框 -->
<el-dialog title="分配角色" :visible.sync="setRoleDialogVisible" width="50%" @close="setRoleDialogClosed">
<div>
<p>當(dāng)前的用戶：{{userInfo.username}}</p>
<p>當(dāng)前的角色：{{userInfo.role_name}}</p>
<p>分配新角色：
<el-select v-model="selectedRoleId" placeholder="請選擇">
<el-option v-for="item in rolesList" :key="item.id" :label="item.roleName" :value="item.id">
</el-option>
</el-select>
</p>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="setRoleDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="saveRoleInfo">確 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
name: "user",
data() {
// 驗證郵箱的規(guī)則
var checkEmail = (rule, value, cb) => {
// 驗證郵箱的正則表達(dá)式
const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
if (regEmail.test(value)) {
// 合法的郵箱
return cb()
}
cb(new Error('請輸入合法的郵箱'))
}
// 驗證手機(jī)號的規(guī)則
var checkMobile = (rule, value, cb) => {
// 驗證手機(jī)號的正則表達(dá)式
const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
if (regMobile.test(value)) {
return cb()
}
cb(new Error('請輸入合法的手機(jī)號'))
}
return {
testValue:"",
treeDataValue:"",
treeList:undefined,
defaultPropsList: {
children: 'children',
label: 'wliName'
},
data: [{
label: '一級 1',
children: [{
label: '二級 1-1',
children: [{
label: '三級 1-1-1'
}]
}]
}, {
label: '一級 2',
children: [{
label: '二級 2-1',
children: [{
label: '三級 2-1-1'
}]
}, {
label: '二級 2-2',
children: [{
label: '三級 2-2-1'
}]
}]
}, {
label: '一級 3',
children: [{
label: '二級 3-1',
children: [{
label: '三級 3-1-1'
}]
}, {
label: '二級 3-2',
children: [{
label: '三級 3-2-1'
}]
}]
}],
form:{},
WarehouseOptions:[
{
whId:2,
whName:"有的"
},
{
whId:3,
whName:"沒有"
}
],
defaultProps: {
children: 'children',
label: 'label'
},
// 獲取用戶列表的參數(shù)對象
queryInfo: {
query: '',
// 當(dāng)前的頁數(shù)
pagenum: 1,
// 當(dāng)前每頁顯示多少條數(shù)據(jù)
pagesize: 10
},
userlist: [],
total: 0,
// 控制添加用戶對話框的顯示與隱藏
addDialogVisible: false,
// 添加用戶的表單數(shù)據(jù)
addForm: {
username: '',
password: '',
email: '',
mobile: ''
},
// 添加表單的驗證規(guī)則對象
addFormRules: {
username: [
{ required: true, message: '請輸入用戶名', trigger: 'blur' },
{
min: 3,
max: 10,
message: '用戶名的長度在3~10個字符之間',
trigger: 'blur'
}
],
password: [
{ required: true, message: '請輸入密碼', trigger: 'blur' },
{
min: 6,
max: 15,
message: '用戶名的長度在6~15個字符之間',
trigger: 'blur'
}
],
email: [
{ required: true, message: '請輸入郵箱', trigger: 'blur' },
{ validator: checkEmail, trigger: 'blur' }
],
mobile: [
{ required: true, message: '請輸入手機(jī)號', trigger: 'blur' },
{ validator: checkMobile, trigger: 'blur' }
]
},
// 控制修改用戶對話框的顯示與隱藏
editDialogVisible: false,
// 查詢到的用戶信息對象
editForm: {},
// 修改表單的驗證規(guī)則對象
editFormRules: {
email: [
{ required: true, message: '請輸入用戶郵箱', trigger: 'blur' },
{ validator: checkEmail, trigger: 'blur' }
],
mobile: [
{ required: true, message: '請輸入用戶手機(jī)', trigger: 'blur' },
{ validator: checkMobile, trigger: 'blur' }
]
},
// 控制分配角色對話框的顯示與隱藏
setRoleDialogVisible: false,
// 需要被分配角色的用戶信息
userInfo: {},
// 所有角色的數(shù)據(jù)列表
rolesList: [],
// 已選中的角色I(xiàn)d值
selectedRoleId: ''
}
},
created() {
this.getUserList()
},
methods: {
testConsistent(){
const data = [
{
"searchValue": null,
"createBy": null,
"createTime": "2022-10-13 16:39:11",
"updateBy": null,
"updateTime": "2022-10-16 15:31:23",
"remark": null,
"params": {},
"parentName": null,
"parentId": null,
"orderNum": null,
"ancestors": null,
"children": [
{
"searchValue": null,
"createBy": null,
"createTime": "2022-10-13 16:39:56",
"updateBy": null,
"updateTime": "2022-10-16 15:31:31",
"remark": null,
"params": {},
"parentName": null,
"parentId": null,
"orderNum": null,
"ancestors": null,
"wliId": 5,
"wliWhId": 28,
"warehouseInformation": {
"searchValue": null,
"createBy": null,
"createTime": null,
"updateBy": null,
"updateTime": null,
"remark": null,
"params": {},
"whId": 28,
"whCode": "2",
"whName": "原材料1號倉",
"whMnemonic": null,
"whWcId": null,
"category": null,
"whProperty": null,
"whPrincipalId": null,
"salesUser": null,
"whAddress": null,
"whIsForever": null,
"whIsVirtual": null,
"whStatus": null,
"delFlag": null,
"remarks": null,
"backup1": null,
"backup2": null,
"backup3": null
},
"wliFId": 4,
"wliCode": "cz",
"wliName": "長治",
"wliMnemonic": "ZZ",
"remarks": null
},
{
"searchValue": null,
"createBy": null,
"createTime": "2022-10-13 16:40:19",
"updateBy": null,
"updateTime": null,
"remark": null,
"params": {},
"parentName": null,
"parentId": null,
"orderNum": null,
"ancestors": null,
"wliId": 6,
"wliWhId": 28,
"warehouseInformation": {
"searchValue": null,
"createBy": null,
"createTime": null,
"updateBy": null,
"updateTime": null,
"remark": null,
"params": {},
"whId": 28,
"whCode": "2",
"whName": "原材料1號倉",
"whMnemonic": null,
"whWcId": null,
"category": null,
"whProperty": null,
"whPrincipalId": null,
"salesUser": null,
"whAddress": null,
"whIsForever": null,
"whIsVirtual": null,
"whStatus": null,
"delFlag": null,
"remarks": null,
"backup1": null,
"backup2": null,
"backup3": null
},
"wliFId": 4,
"wliCode": "ty",
"wliName": "太原",
"wliMnemonic": "TY",
"remarks": null
}
],
"wliId": 4,
"wliWhId": 28,
"warehouseInformation": {
"searchValue": null,
"createBy": null,
"createTime": null,
"updateBy": null,
"updateTime": null,
"remark": null,
"params": {},
"whId": 28,
"whCode": "2",
"whName": "原材料1號倉",
"whMnemonic": null,
"whWcId": null,
"category": null,
"whProperty": null,
"whPrincipalId": null,
"salesUser": null,
"whAddress": null,
"whIsForever": null,
"whIsVirtual": null,
"whStatus": null,
"delFlag": null,
"remarks": null,
"backup1": null,
"backup2": null,
"backup3": null
},
"wliFId": 0,
"wliCode": "sx",
"wliName": "山西",
"wliMnemonic": "SX",
"remarks": null
}
];
console.log(this.form.aloWhTo)
if(this.form.aloWhTo === 2){
this.treeList = data;
}else {
this.treeList = null;
}
},
getTypeList(index) {
// .getCurrentKey()獲取到當(dāng)前要選擇節(jié)點的key值
// 使用此方法必須設(shè)置 node-key 屬性，若沒有節(jié)點被選中則返回 null
const nodeId = this.$refs['addressTree' + index].getCurrentKey()
// .getNode(nodeId) 根據(jù) data 或者 key 拿到 Tree 組件中的 node
const node = this.$refs['addressTree' + index].getNode(nodeId)
// 根據(jù)index給當(dāng)前元素的categoryName參數(shù)賦值
this.$set(this.userlist[index], 'address', node.label)
//this.$set(this.userlist[index], 'categoryNo', node.data.docTypeNo)
// 此時頁面上已經(jīng)可以動態(tài)選擇
// 這一步是通過判斷當(dāng)前元素的v-model是否有值來控制el-option是否隱藏
if (this.userlist[index].address) {
// .blur()用來隱藏當(dāng)前展開的下拉選擇框
this.$refs['address' + index].blur()
}
},
handleNodeClick(data) {
console.log(data);
this.testValue = data.wliName;
console.log(this.testValue)
},
getUserList() {
// const { data: res } = await this.$http.get('users', {
// params: this.queryInfo
// })
// if (res.meta.status !== 200) {
// return this.$message.error('獲取用戶列表失敗！')
// }
// console.log("獲取用戶信息")
// console.log(res)
var res = {
"data": {
"total": 6,
"pagenum": 1,
"users": [
{
"id": 500,
"role_name": "超級管理員",
"username": "admin",
"create_time": 1486720211,
"mobile": "12345678",
"email": "adsfad@qq.com",
"mg_state": true
},
{
"id": 502,
"role_name": "測試角色2",
"username": "linken",
"create_time": 1486720211,
"mobile": "1213213123",
"email": "asdf@qq.com",
"mg_state": true
},
{
"id": 508,
"role_name": "主管",
"username": "asdf1",
"create_time": 1511853015,
"mobile": "123123",
"email": "adfsa@qq.com",
"mg_state": true
},
{
"id": 509,
"role_name": "test",
"username": "asdf123",
"create_time": 1511853353,
"mobile": "1111",
"email": "asdf@qq.com",
"mg_state": false
},
{
"id": 510,
"role_name": "超級管理員",
"username": "lingyi",
"create_time": 1664245645,
"mobile": "18998999999",
"email": "2311229622@qq.com",
"mg_state": true
},
{
"id": 511,
"role_name": "超級管理員",
"username": "123",
"create_time": 1664246336,
"mobile": "15166578443",
"email": "2499070273@qq.com",
"mg_state": false
}
]
},
"meta": {
"msg": "獲取管理員列表成功",
"status": 200
}
};
this.userlist = res.data.users
this.total = res.data.total
console.log(res)
},
// 監(jiān)聽 pagesize 改變的事件
handleSizeChange(newSize) {
// console.log(newSize)
this.queryInfo.pagesize = newSize
this.getUserList()
},
// 監(jiān)聽 頁碼值 改變的事件
handleCurrentChange(newPage) {
console.log(newPage)
this.queryInfo.pagenum = newPage
this.getUserList()
},
// 監(jiān)聽 switch 開關(guān)狀態(tài)的改變
async userStateChanged(userinfo) {
console.log(userinfo)
const { data: res } = await this.$http.put(
`users/${userinfo.id}/state/${userinfo.mg_state}`
)
if (res.meta.status !== 200) {
userinfo.mg_state = !userinfo.mg_state
return this.$message.error('更新用戶狀態(tài)失敗！')
}
this.$message.success('更新用戶狀態(tài)成功！')
},
// 監(jiān)聽添加用戶對話框的關(guān)閉事件
addDialogClosed() {
this.$refs.addFormRef.resetFields()
},
// 點擊按鈕，添加新用戶
addUser() {
this.$refs.addFormRef.validate(async valid => {
if (!valid) return
// 可以發(fā)起添加用戶的網(wǎng)絡(luò)請求
const { data: res } = await this.$http.post('users', this.addForm)
if (res.meta.status !== 201) {
this.$message.error('添加用戶失敗！')
}
this.$message.success('添加用戶成功！')
// 隱藏添加用戶的對話框
this.addDialogVisible = false
// 重新獲取用戶列表數(shù)據(jù)
this.getUserList()
})
},
// 展示編輯用戶的對話框
async showEditDialog(id) {
// console.log(id)
const { data: res } = await this.$http.get('users/' + id)
if (res.meta.status !== 200) {
return this.$message.error('查詢用戶信息失敗！')
}
this.editForm = res.data
this.editDialogVisible = true
},
// 監(jiān)聽修改用戶對話框的關(guān)閉事件
editDialogClosed() {
this.$refs.editFormRef.resetFields()
},
// 修改用戶信息并提交
editUserInfo() {
this.$refs.editFormRef.validate(async valid => {
if (!valid) return
// 發(fā)起修改用戶信息的數(shù)據(jù)請求
const { data: res } = await this.$http.put(
'users/' + this.editForm.id,
{
email: this.editForm.email,
mobile: this.editForm.mobile
}
)
if (res.meta.status !== 200) {
return this.$message.error('更新用戶信息失?。?)
}
// 關(guān)閉對話框
this.editDialogVisible = false
// 刷新數(shù)據(jù)列表
this.getUserList()
// 提示修改成功
this.$message.success('更新用戶信息成功！')
})
},
// 根據(jù)Id刪除對應(yīng)的用戶信息
async removeUserById(id) {
// 彈框詢問用戶是否刪除數(shù)據(jù)
const confirmResult = await this.$confirm(
'此操作將永久刪除該用戶, 是否繼續(xù)?',
'提示',
{
confirmButtonText: '確定',
cancelButtonText: '取消',
type: 'warning'
}
).catch(err => err)
// 如果用戶確認(rèn)刪除，則返回值為字符串 confirm
// 如果用戶取消了刪除，則返回值為字符串 cancel
// console.log(confirmResult)
if (confirmResult !== 'confirm') {
return this.$message.info('已取消刪除')
}
const { data: res } = await this.$http.delete('users/' + id)
if (res.meta.status !== 200) {
return this.$message.error('刪除用戶失??！')
}
this.$message.success('刪除用戶成功！')
this.getUserList()
},
// 展示分配角色的對話框
async setRole(userInfo) {
this.userInfo = userInfo
// 在展示對話框之前，獲取所有角色的列表
const { data: res } = await this.$http.get('roles')
if (res.meta.status !== 200) {
return this.$message.error('獲取角色列表失敗！')
}
this.rolesList = res.data
this.setRoleDialogVisible = true
},
// 點擊按鈕，分配角色
async saveRoleInfo() {
if (!this.selectedRoleId) {
return this.$message.error('請選擇要分配的角色！')
}
const { data: res } = await this.$http.put(
`users/${this.userInfo.id}/role`,
{
rid: this.selectedRoleId
}
)
if (res.meta.status !== 200) {
return this.$message.error('更新角色失敗！')
}
this.$message.success('更新角色成功！')
this.getUserList()
this.setRoleDialogVisible = false
},
// 監(jiān)聽分配角色對話框的關(guān)閉事件
setRoleDialogClosed() {
this.selectedRoleId = ''
this.userInfo = {}
}
}
}
</script>
<style lang="less" scoped>
</style>總結(jié)
到此這篇關(guān)于如何使用el-table+el-tree+el-select動態(tài)選擇對應(yīng)值的文章就介紹到這了,更多相關(guān)el-table el-tree+el-select動態(tài)選擇對應(yīng)值內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue v-for中的 input 或 select的值發(fā)生改變時觸發(fā)事件操作
這篇文章主要介紹了Vue v-for中的 input 或 select的值發(fā)生改變時觸發(fā)事件操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了Element Breadcrumb 面包屑的使用方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
今天小編就為大家分享一篇關(guān)于Vue核心概念Getter的使用方法，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
vue中img src 動態(tài)加載本地json的圖片路徑寫法
這篇文章主要介紹了vue中的img src 動態(tài)加載本地json的圖片路徑寫法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
如何使用 Vue Router 的 meta 屬性實現(xiàn)多種功能
在Vue.js中,Vue Router 提供了強(qiáng)大的路由管理功能,通過meta屬性,我們可以在路由定義中添加自定義元數(shù)據(jù),以實現(xiàn)訪問控制、頁面標(biāo)題設(shè)置、角色權(quán)限管理、頁面過渡效果,本文將總結(jié)如何使用 meta 屬性來實現(xiàn)這些常見的功能,感興趣的朋友一起看看吧2024-06-06
這篇文章主要介紹了el-date-picker日期選擇限制范圍,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-09-09
這篇文章主要介紹了vue項目配置element-ui容易遇到的坑及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要為大家詳細(xì)介紹了Vue.use源碼，Vue.use方法的引入，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
vue.js表單驗證插件(vee-validate)的使用教程詳解
這篇文章主要介紹了vue.js表單驗證插件(vee-validate)的使用，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
vue?props使用typescript自定義類型的方法實例
這篇文章主要給大家介紹了關(guān)于vue?props使用typescript自定義類型的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-01-01