如何使用el-table+el-tree+el-select动态选择对应值
目录
- 背景描述：
- 我碰到的问题：
- 解决问题：
- 总结
使用el-table+el-select+el-tree来实现element中el-table表格动态选择对应值
背景描述：
项目组的老大让我们完成一个选择一个下拉框中的值，然后再动态选择该下拉框中树形结构的数值，说起来有点绕，给大家截个图，大家就一目了然了。
其实这个功能的实现主要借助与el-table、el-tree、el-select这三个组件就可以实现。
我碰到的问题：
（1）el-tree数据不显示。
（2）el-tree显示数据后无法绑定某一行。
（3）el-tree不能及时同步显示数据。
但是一开始做的时候一头雾水，因为我是做后端的，其实对前端的知识真的了解的不多，所以，在苦心钻研了一天终于参考了一篇大神的博客，成功解决的这个问题。
在这里附上原文地址：https://www.jb51.net/article/272778.htm
解决问题：
根据大神的文章，我对其中的方法进行了主要的修改，然后按照大神的逻辑，重新修改了页面，发现就成功了，在这里具体什么原因其实我也不知道，但是在这里附上源码，方便大家进行参考。
其实核心主要是三大方面：
（1）第一步，选中下拉框，获取树形数据。
<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>
补充：大家在前端指导如何把数据转成树形结构吗？
其实很简单：只需要借助于handleTree（）方法即可，但是在合理提前是你查询的数据是包含这种父子关系的字段的，比如我这里的wliFd这个字段就很关键。
listWarehouseLocationInfo(this.queryParamsByLocation).then(response => {
this.WarehouseLocationInfoList = this.handleTree(response.data, 'wliId', 'wliFId')
console.log("我是最终要返回的数据")
console.log(this.WarehouseLocationInfoList)
})
（2）通过@change="testConsistent"获取树形结构数据treeList，在这里我主要是模拟的树形数据。
{
"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进行数据绑定，这里具体的参数大家可以参照我推荐的大神的博客，在这里我就不一一介绍了。
<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的名字还有数据表的名字即可使用，方便快捷，并且能够实现相应的功能。
getTypeList(index) {
// .getCurrentKey()获取到当前要选择节点的key值
// 使用此方法必须设置 node-key 属性，若没有节点被选中则返回 null
const nodeId = this.$refs['addressTree' + index].getCurrentKey()
// .getNode(nodeId) 根据 data 或者 key 拿到 Tree 组件中的 node
const node = this.$refs['addressTree' + index].getNode(nodeId)
// 根据index给当前元素的categoryName参数赋值
this.$set(this.userlist[index], 'address', node.label)
//this.$set(this.userlist[index], 'categoryNo', node.data.docTypeNo)
// 此时页面上已经可以动态选择
// 这一步是通过判断当前元素的v-model是否有值来控制el-option是否隐藏
if (this.userlist[index].address) {
// .blur()用来隐藏当前展开的下拉选择框
this.$refs['address' + index].blur()
}
},
至此到这里就全部结束了。
（5）在这里附上整个页面的所有代码，方便大家可以再本地进行测试。
<template>
<div>
<!-- 面包屑导航区域 -->
<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>
<!-- 卡片视图区域 -->
<el-card>
<!-- 搜索与添加区域 -->
<el-row :gutter="20">
<el-col :span="8">
<el-input placeholder="请输入内容" 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>
<!-- 用户列表区域 -->
<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="状态">
<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>
<!-- 分页区域 -->
<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">
<!-- 内容主体区域 -->
<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="手机" prop="mobile">
<el-input v-model="addForm.mobile"></el-input>
</el-form-item>
</el-form>
<!-- 底部区域 -->
<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="手机" 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>当前的用户：{{userInfo.username}}</p>
<p>当前的角色：{{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() {
// 验证邮箱的规则
var checkEmail = (rule, value, cb) => {
// 验证邮箱的正则表达式
const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
if (regEmail.test(value)) {
// 合法的邮箱
return cb()
}
cb(new Error('请输入合法的邮箱'))
}
// 验证手机号的规则
var checkMobile = (rule, value, cb) => {
// 验证手机号的正则表达式
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('请输入合法的手机号'))
}
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'
},
// 获取用户列表的参数对象
queryInfo: {
query: '',
// 当前的页数
pagenum: 1,
// 当前每页显示多少条数据
pagesize: 10
},
userlist: [],
total: 0,
// 控制添加用户对话框的显示与隐藏
addDialogVisible: false,
// 添加用户的表单数据
addForm: {
username: '',
password: '',
email: '',
mobile: ''
},
// 添加表单的验证规则对象
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: '请输入手机号', trigger: 'blur' },
{ validator: checkMobile, trigger: 'blur' }
]
},
// 控制修改用户对话框的显示与隐藏
editDialogVisible: false,
// 查询到的用户信息对象
editForm: {},
// 修改表单的验证规则对象
editFormRules: {
email: [
{ required: true, message: '请输入用户邮箱', trigger: 'blur' },
{ validator: checkEmail, trigger: 'blur' }
],
mobile: [
{ required: true, message: '请输入用户手机', trigger: 'blur' },
{ validator: checkMobile, trigger: 'blur' }
]
},
// 控制分配角色对话框的显示与隐藏
setRoleDialogVisible: false,
// 需要被分配角色的用户信息
userInfo: {},
// 所有角色的数据列表
rolesList: [],
// 已选中的角色Id值
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()获取到当前要选择节点的key值
// 使用此方法必须设置 node-key 属性，若没有节点被选中则返回 null
const nodeId = this.$refs['addressTree' + index].getCurrentKey()
// .getNode(nodeId) 根据 data 或者 key 拿到 Tree 组件中的 node
const node = this.$refs['addressTree' + index].getNode(nodeId)
// 根据index给当前元素的categoryName参数赋值
this.$set(this.userlist[index], 'address', node.label)
//this.$set(this.userlist[index], 'categoryNo', node.data.docTypeNo)
// 此时页面上已经可以动态选择
// 这一步是通过判断当前元素的v-model是否有值来控制el-option是否隐藏
if (this.userlist[index].address) {
// .blur()用来隐藏当前展开的下拉选择框
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)
},
// 监听 pagesize 改变的事件
handleSizeChange(newSize) {
// console.log(newSize)
this.queryInfo.pagesize = newSize
this.getUserList()
},
// 监听 页码值 改变的事件
handleCurrentChange(newPage) {
console.log(newPage)
this.queryInfo.pagenum = newPage
this.getUserList()
},
// 监听 switch 开关状态的改变
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('更新用户状态失败！')
}
this.$message.success('更新用户状态成功！')
},
// 监听添加用户对话框的关闭事件
addDialogClosed() {
this.$refs.addFormRef.resetFields()
},
// 点击按钮，添加新用户
addUser() {
this.$refs.addFormRef.validate(async valid => {
if (!valid) return
// 可以发起添加用户的网络请求
const { data: res } = await this.$http.post('users', this.addForm)
if (res.meta.status !== 201) {
this.$message.error('添加用户失败！')
}
this.$message.success('添加用户成功！')
// 隐藏添加用户的对话框
this.addDialogVisible = false
// 重新获取用户列表数据
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
},
// 监听修改用户对话框的关闭事件
editDialogClosed() {
this.$refs.editFormRef.resetFields()
},
// 修改用户信息并提交
editUserInfo() {
this.$refs.editFormRef.validate(async valid => {
if (!valid) return
// 发起修改用户信息的数据请求
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('更新用户信息失败！')
}
// 关闭对话框
this.editDialogVisible = false
// 刷新数据列表
this.getUserList()
// 提示修改成功
this.$message.success('更新用户信息成功！')
})
},
// 根据Id删除对应的用户信息
async removeUserById(id) {
// 弹框询问用户是否删除数据
const confirmResult = await this.$confirm(
'此操作将永久删除该用户, 是否继续?',
'提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}
).catch(err => err)
// 如果用户确认删除，则返回值为字符串 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
},
// 监听分配角色对话框的关闭事件
setRoleDialogClosed() {
this.selectedRoleId = ''
this.userInfo = {}
}
}
}
</script>
<style lang="less" scoped>
</style>
总结
到此这篇关于如何使用el-table+el-tree+el-select动态选择对应值的文章就介绍到这了,更多相关el-table el-tree+el-select动态选择对应值内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
赞 (0)
相关推荐
-
el-select与el-tree结合使用实现树形结构多选框
目录 前言 话不多说,上代码 思路: 重点: 总结 前言 接上篇文章需求,选择树形结构的时候有多选的情况,用上一篇的单选并不能解决问题,下图是这次达到的效果 话不多说,上代码 html <el-select v-model="value" multiple placeholder="请选择" :popper-append-to-body="false" @remove-tag="removetag" collapse-t
-
vue el-select与el-tree实现支持可搜索树型
目录 1. 树型下拉菜单 2. vue页面代码 3. selectTree 组件代码 1. 树型下拉菜单 实现效果 2. vue页面代码 引入selectTree组件 import { selectTree } from '@/components' export default { components: { selectTree }, data() { defaultData:{ managementStationId:'1478570186653609986', managementSta
-
vue+layui实现select动态加载后台数据的例子
刚开始由于layui form渲染与vue渲染有时间差 有时会导致 select里面是空白的 后来就想办法 等vue数据渲染完 再渲染layui form 试过模块化导入layui form组件 然后等vue数据渲染完后手动进行渲染 这种方式有一个小问题 有时候会提示render方法未定义 可能是由于执行顺序原因 vue先执行了 最后把vue代码放到layui.use里面 问题解决 可能不是最好的实现方式 如有更好的实现方式欢迎指出 共同进步 页面代码 <div id="demo"
-
vue select组件绑定的值为数字类型遇到的问题
目录 select组件绑定的值为数字类型问题 vue中的绑定值 学习重点 select组件绑定的值为数字类型问题 在日常开发中,我们双向绑定的form表单,经常会遇到对数字类型的绑定,但对于v-model 绑定的值,输入数字会自动转成字符串类型. 对于input输入框绑定的值,想要修改为数字类型很简单,只需要使用表单的修饰符就可以.如下所示 number 可以将绑定的 v-model 改为 number 类型 <input v-model.number="age" type=&q
-
使用js对select动态添加和删除OPTION示例代码
<select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态删除select中的所有options: document.getElementById("ddlResourceType").options.length=0; 动态删除select中的某一项option: document.getElementById("ddlResourc
-
jquery通过select列表选择框对表格数据进行过滤示例
jquery通过select列表选择框对表格数据进行过滤 表格数据 复制代码 代码如下: <table id="example"> <thead> <tr> <th>Name</th> <th>Surname</th> </tr> </thead> <tbody>
-
关于react ant 组件 Select下拉框 值回显的问题
目录 react ant组件Select下拉框值回显问题 情形 解决得问题 react ant-design Select组件下拉框map不显示 问题描述 问题总结 react ant组件Select下拉框值回显问题 情形 最近在处理react 页面的时候遇到了一个问题:使用ant 的table组件,里面的可编辑单元格类型,但是 我的数据 有一个下拉框在表格中,因为可编辑的table 组件默认单元格是 input输入框,所以下拉框根本就拿不到值,显示不上. 先说一下 下拉框 在表格 column
-
JavaScript通过select动态更换图片的方法
本文实例讲述了JavaScript通过select动态更换图片的方法.分享给大家供大家参考.具体分析如下: 下面的JS代码在select列表变化时触发SetBeerIcon()函数,SetBeerIcon()函数可以根据select选择的值动态修改图片 ... <script language="JavaScript" type="text/javascript" > function setBeerIcon() { var beerIcon = doc
-
jquery Ajax实现Select动态添加数据
jquery Ajax实现Select动态添加数据,具体内容如下 1.背景 最近在工作中,遇到了一个关于select的问题.一般情况下,select下拉框中的数据都是固定的或者直接在jsp中读取列表值显示.但是,这次要实现select与别的选项框联动,也就是要动态添加option数据.查阅了很多资料,终于搞定.下面就分享一下,如何利用jQuery和Ajax实现select动态添加数据. 2.本文代码实现的是车辆型号根据车辆品牌联动显示的功能.首先,是jsp中的车辆品牌定义,这个很简单.如下:
-
jQuery获取table下某一行某一列的值实现代码
jQuery获取table下某一行某一列的值实现代码 最近需要获取到某个table下每一行某一列的值,用jQuery做了一会儿,过程如下,仅供参考: <div class="div"> <table name="info"><tr><td>lily<span>okok</span></td></tr><tr><td>18</td><
-
js实现Select头像选择实时预览代码
本文实例讲述了js实现Select头像选择实时预览代码.分享给大家供大家参考.具体如下: 这里演示js实现Select头像选择,实时预览效果,在留言或评论的时候,让用户简易的选择头像,以前最常见的方式是使用单选框,当然使用其它的形式也可以,比如今天这个Select,下拉选框选择头像,也是不错的体验. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-select-ico-pic-view-codes/ 具体代码如下: <!DOCTYPE ht
-
javascript获取select标签选中的值
复制代码 代码如下: var obj = document.getElementById("testSelect"); //定位id var index = obj.selectedIndex; // 选中索引 var text = obj.options[index].text; // 选中文本 var value = obj.options[index].value; // 选中值 jQuery中获得选中select值 第一种方式 复制代码 代码如下: $('#testSelect