vue中select的使用以及select设置默认选中20190222
1.问题：写角色页面，就是我循环出select内的数据以后，发现原本默认显示第一条的select框变成了空白2.解决思路：html代码如下，通过v-model可以获取到选中的值，如果option中存在value属性，优先获取value值即coupon.id，如果不存在，则获取option的文本内容，也就是下面代码中coupon.name.3.大神的Demo参考:<sel...
·
1.问题：
写角色页面，就是我循环出select内的数据以后，发现原本默认显示第一条的select框变成了空白
2.解决思路：
html代码如下，通过v-model可以获取到选中的值，如果option中存在value属性，优先获取value值即coupon.id，如果不存在，则获取option的文本内容，也就是下面代码中coupon.name.
3.大神的Demo参考:
<select name="public-choice" v-model="couponSelected" @change="getCouponSelected">
<option :value="coupon.id" v-for="coupon in couponList" >{{coupon.name}}</option>
</select>
首先说明，html这样写没有任何问题，动态的select的正确使用方法就是这样。
下面是js代码：
var vm = new Vue({
el: '#app',
data:{
couponList:[
{
id: 'A',
name: '优惠券1'
},
{
id: '1',
name: '优惠券2'
},
{
id: '2',
name: '优惠券3'
}
],
couponSelected: '',
},
created(){
//如果没有这句代码，select中初始化会是空白的，默认选中就无法实现
this.couponSelected = this.couponList[0].id;
},
methods:{
getCouponSelected(){
//获取选中的优惠券
console.log(this.couponSelected)
}
}
})上面的js代码是正确的，我下面说明一下隐藏属性是什么
隐藏属性就是
当我们把v-model中的couponSelected,也就是data里的couponSelected的值赋值为循环的option中的value后，那这个option就会被默认选中
4.小结
官方参考文档：https://cn.vuejs.org/v2/guide/forms.html
以上demo参考链接：https://www.cnblogs.com/till-the-end/p/8473738.html
5.实际尝试操作：
遇到的问题，第一次赋值可以，然后打开第二行信息的收应该是空，实际是admin,
怀疑是赋值问题，打开时默认赋值时是空的，然后再查询一次后赋值，或者是直接当前角色信息，空为空，值为值。
<template>
<div>
<!--添加按钮-->
<el-row style="padding: 10px 0;">
<el-col :span="20" :offset="2">
<el-button type="info" @click="handleAdd()">添加用户</el-button>
</el-col>
</el-row>
<!--列表展示部分-->
<el-row style="padding: 10px 0;">
<el-col :span="20" :offset="2">
<el-table
:data="dataList"
border
v-loading.body="isTableLoading"
style="width: 100%">
<el-table-column
label="用户名字">
<template scope="scope">
<span style="margin-left: 10px">{{ scope.row.name }}</span>
</template>
</el-table-column>
<el-table-column
label="邮箱">
<template scope="scope">
<span style="margin-left: 10px">{{ scope.row.email }}</span>
</template>
</el-table-column>
<el-table-column
label="状态" width="100px">
<template scope="scope">
<span style="margin-left: 10px">
<el-tag v-if=" scope.row.status == 0 " type="warning">未激活</el-tag>
<el-tag v-if=" scope.row.status == 1 " type="success">正常</el-tag>
<el-tag v-if=" scope.row.status == 2 " type="danger">冻结</el-tag>
</span>
</template>
</el-table-column>
<el-table-column
label="上次登陆时间">
<template scope="scope">
<span v-if="scope.row.lastLoginTime" style="margin-left: 10px">{{ scope.row.lastLoginTime | TimeFormat }}</span>
</template>
</el-table-column>
<el-table-column label="操作" width="400px;">
<template scope="scope">
<el-button
v-if="scope.row.status == 1"
size="small"
type="danger"
@click="handleFreeze(scope.row.id, 2, scope.$index)">冻结
</el-button>
<el-button
v-if="scope.row.status == 2"
size="small"
type="success"
@click="handleFreeze(scope.row.id, 1, scope.$index)">解冻
</el-button>
<el-button
size="small"
type="danger"
@click="handleDelete(scope.row.id, scope.$index)">删除
</el-button>
<el-button
size="small"
type="warning"
@click="handleModify(scope.row)">修改
</el-button>
<el-button
size="small"
type="warning"
@click="shandleModify(scope.row)">查看
</el-button>
<el-button
size="small"
type="warning"
@click="setRole(scope.row.id,scope.row.roleId,scope.row.role_name)">设置角色
</el-button>
</template>
</el-table-column>
</el-table>
</el-col>
</el-row>
<!--分页-->
<el-row>
<el-col :span="24" style="text-align:center">
<el-pagination
style="text-align:center;margin-top:20px"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageNum"
:page-sizes="[5, 10, 20, 50]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="totalCount">
</el-pagination>
</el-col>
</el-row>
<!--增加和修改模块部分-->
<el-dialog :title="title" :visible.sync="addUserVisible" size="tiny">
<el-form :model="inviteForm" :rules="inviteRules" ref="inviteForm">
<el-form-item label="用户名字" :label-width="formLabelWidth" prop="name">
<el-input v-model="inviteForm.name" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="用户邮箱" :label-width="formLabelWidth" prop="email">
<el-input v-model="inviteForm.email" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="用户电话" :label-width="formLabelWidth" prop="telephone">
<el-input v-model="inviteForm.telephone" auto-complete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="addUserVisible = false">取 消</el-button>
<el-button type="primary" @click="handleInviteUser()" :loading="isInviting">确 定</el-button>
</div>
</el-dialog>
<!--查看部分-->
<el-dialog :title="title" :visible.sync="addUserVisible1" size="tiny">
<el-form :model="inviteForm1" :ref="inviteForm1">
<el-form-item label="用户名字" :label-width="formLabelWidth" prop="name">
<span style="margin-left: 10px">{{inviteForm1.name}}</span>
</el-form-item>
<el-form-item label="用户邮箱" :label-width="formLabelWidth" prop="email">
<span style="margin-left: 10px">{{inviteForm1.email}}</span>
</el-form-item>
<el-form-item label="用户电话" :label-width="formLabelWidth" prop="telephone">
<span style="margin-left: 10px">{{inviteForm1.telephone}}</span>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="addUserVisible1 = false">确 定</el-button>
</div>
</el-dialog>
<!--设置角色-->
<el-dialog :title="title" :visible.sync="addUserVisible2" size="tiny">
<el-form :model="inviteForm2" :ref="inviteForm2">
<div style="display:none;">{{inviteForm2.id}}</div>
<select name="public-choice" v-model ="roleSelected" style="width: 200px;" autocomplete="off" @change ="changeRole($event)">
<option value="" >请选择</option>
<option :value="role.id" v-for="role in roleList" >
{{ role.role_name }}
</option>
</select>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="saveRole()">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { mapActions } from 'vuex'
export default {
data(){
//校验邮箱
const emailValidator = (rule, value, callback)=>{
if((/^[-a-z0-9~!$%^&*_=+}{\'?]+(\.[-a-z0-9~!$%^&*_=+}{\'?]+)*@([a-z0-9_][-a-z0-9_]*(\.[-a-z0-9_]+)*\.(aero|arpa|biz|com|coop|edu|gov|info|int|mil|museum|name|net|org|pro|travel|mobi|[a-z][a-z])|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,5})?$/i.test(value))){
callback()
}else{
callback(new Error('请输入正确的邮箱地址'))
}
}
return {
isInviting:false,//增加页面和修改页面
addUserVisible:false,//增加和修改页面
addUserVisible1:false,//查看页面
addUserVisible2:false,//角色选择页面
isTableLoading:false,//列表加载
title:'',//所有弹出层的共用title
currentUserInfo:null,//当前用户信息
roleSelected:'',//设置select选中
option:'',
inviteForm:{//增加和修改页面的字段信息
name:"",
email:"",
telephone:""
},
inviteForm1:{//查看页面的字段信息
name:"",
email:"",
telephone:""
},
inviteForm2:{//角色选择页面的字段信息
id:"",//当前选中用户的id
roleId:"",//当前用户选中的角色的id
},
formLabelWidth:"80px",//设置宽度
dataList:[],//列表加载的集合
roleList: [],//角色选择的集合
pageSize: 10,//分页信息-每页多少
totalCount:0,//分页信息-总共多少页
pageNum:1,//第几页
inviteRules:{//增加或修改页面的校验规则
name: [
{ required: true, message: '请输入用户名字', trigger: 'blur' }
],
email: [
{ required: true, validator: emailValidator, trigger: 'blur' }
],
}
}
},
//初始化加载并获取用户列表（ok）
mounted: function () {
this.isTableLoading = true;
this.getUserList({
pageSize: this.pageSize,
pageNum: this.pageNum
}).then((result) => {
this.isTableLoading = false;
this.totalCount = result.totalCount;
this.dataList = result.resultData;
console.log(this.dataList);
}, () => {
this.isTableLoading = false;
this.$message.error('列表加载失败！');
})
},
methods:{
...mapActions([
'getUserList',
'updateUser',
'deleteUser',
'inviteUser',
'getUserById',
'getRoleList',
'getRoleInfo',
]),
//点击增加用户的按钮(ok)
handleAdd(){
this.addUserVisible = true,
this.title = '增加用户',
this.inviteForm = { name:"", email:"",telephone:"" };
this.currentUserInfo = null
},
//修改用户的按钮(ok)
handleModify(data){
this.title = '修改用户';
this.addUserVisible = true;
this.currentUserInfo = data;
this.getUserById({
id: data.id
})
.then((result) => {
this.inviteForm = {
name:data.name,
email:data.email,
telephone:data.telephone
}
}, () => {})
},
//查看按钮(ok)
shandleModify(data){
this.title = '查看用户';
this.addUserVisible1 = true;
this.getUserById({
id: data.id
})
.then((result) => {
this.inviteForm1 = {
name:data.name,
email:data.email,
telephone:data.telephone
}
}, () => {})
},
//执行增加或者修改(ok)
handleInviteUser(){
this.$refs['inviteForm'].validate((valid) => {
if (valid) {
this.isInviting = true;
this.isTableLoading = true;
(()=>{
if(this.currentUserInfo){
this.inviteForm.id = this.currentUserInfo.id;
return this.updateUser(this.inviteForm)
}else{
return this.inviteUser(this.inviteForm)
}
})()
.then(()=>{
this.isInviting = false;
this.addUserVisible = false;
this.inviteForm = { name:"", email:"",telephone:"" };
this.$message({
message: this.title+'成功',
type: 'success'
});
this.isTableLoading = true;
this.getUserList({
pageSize:this.pageSize,
pageNum:this.pageNum
}).then((result) => {
this.isTableLoading = false;
this.totalCount = result.totalCount;
this.dataList = result.resultData;
}, () => {
this.isTableLoading = false;
this.$message.error('列表加载失败！');
})
},()=>{
this.isInviting = false;
this.$message({
message: this.title+'失败',
type: 'error'
});
})
}
})
},
//删除用户（ok）
handleDelete(userId, index) {
this.$confirm('此操作将永久删除数据, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.isTableLoading = true;
this.deleteUser({
id: userId
})
.then(() => {
this.getUserList({
pageSize: this.pageSize,
pageNum: this.pageNum
})
.then((result) => {
this.isTableLoading = false;
this.totalCount = result.totalCount;
this.dataList = result.resultData;
this.$message({
type: 'success',
message: '删除成功!'
});
}, () => {
this.isTableLoading = false;
this.$message.error('列表刷新失败！');
})
}, () => {
this.$message({
type: 'error',
message: '删除失败!'
});
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
//冻结或者解冻用户
handleFreeze(userId, status, index){
this.isTableLoading = true;
this.updateUser({
id:userId,
status:status
})
.then((result) => {
this.isTableLoading = false;
this.dataList[index].status = status;
this.$message({
message: '修改成功！',
type: 'success'
});
}, () => {
this.isTableLoading = false;
this.$message.error('修改失败！');
})
},
//获取用户的所有角色的按钮(ok)
setRole(id,roleId,role_name){
//调用方法获取角色列表
this.user_id = id;//获取角色id
this.addUserVisible2 = true;
this.title = '选择角色';
this.getRoleList({//调用方法获取所有角色的列表
})
.then((result) => {
this.isTableLoading = false;
this.roleList = result.resultData;
//console.log("当前角色列表"+this.roleList);
//如果没有这句代码，select中初始化会是空白的，默认选中就无法实现
//this.roleSelected = this.roleList[0].id;
//console.log("当前选中角色id:"+this.roleSelected);
this.roleSelected = roleId;//设置默认选中的值
}, () => {
this.isTableLoading = false;
this.$message.error('列表加载失败！');
})
},
//获取每次option选中时的id(ok)
changeRole(event) {
this.option = event.target.value; //获取ID，即option对应的ID值
console.log("变更后的角色"+this.option);
},
//增加用户的角色(ok)
saveRole(){
this.addUserVisible2 = false;
//调用方法给角色赋值
//alert(this.option);
this.inviteForm2 = { id:this.user_id, roleId:this.option};
this.updateUser(this.inviteForm2)
},
//分页
handleSizeChange(pageSize){
this.pageSize = pageSize;
this.pageNum = 1;
this.isTableLoading = true;
this.getUserList({
pageSize:this.pageSize,
pageNum:this.pageNum
})
.then((result) => {
this.isTableLoading = false;
this.totalCount = result.totalCount;
this.dataList = result.resultData;
}, () => {
this.isTableLoading = false;
this.$message.error('列表加载失败！');
})
},
//分页
handleCurrentChange(pageNum){
this.pageNum = pageNum;
this.isTableLoading = true;
this.getUserList({
pageSize:this.pageSize,
pageNum:this.pageNum
})
.then((result) => {
this.isTableLoading = false;
this.totalCount = result.totalCount;
this.dataList = result.resultData;
}, () => {
this.isTableLoading = false;
this.$message.error('列表加载失败！');
})
},
//修改角色的按钮
}
}
</script>
<style lang="less" scoped>
</style>
前往低代码交流专区
更多推荐
6
0- 0
已为社区贡献1条内容
所有评论(0)