我使用的是element ui V1.4.3
如下图是我要实现的效果：
点击显示 Dialog
:data="gridData"
border
height="300"
>
on-text ="是"
off-text = "否"
on-color="#5B7BFA"
off-color="#dadde5"
v-model="scope.row.menusstate"
@change=change(scope.$index,scope.row)
>
确定
取消
export default {
data() {
return {
dialogTableVisible: false, //是否显示 Dialog
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
gridData:[
{
name:"划款指令",
menusstate:false,
},
{
name:"基础信息管理",
menusstate:false,
},
{
name:"监管报表",
menusstate:false,
},
{
name:"划款指令",
menusstate:false,
},
{
name:"基础信息管理",
menusstate:false,
},
{
name:"监管报表",
menusstate:false,
},
{
name:"划款指令",
menusstate:false,
},
{
name:"基础信息管理",
menusstate:false,
},
{
name:"监管报表",
menusstate:false,
},
{
name:"划款指令",
menusstate:false,
},
{
name:"基础信息管理",
menusstate:false,
},
{
name:"监管报表",
menusstate:false,
},
{
name:"划款指令",
menusstate:false,
},
{
name:"基础信息管理",
menusstate:false,
},
{
name:"监管报表",
menusstate:false,
},
{
name:"划款指令",
menusstate:false,
},
{
name:"基础信息管理",
menusstate:false,
},
{
name:"监管报表",
menusstate:false,
}
],
}
},
methods:{
change:function(index,row){
console.log(index,row);
}
}
}
.menusStateTrue{
background: #5B7BFA;
color:white;
}
.menusStateTrue:hover{
background: #5B7BFA;
color:white;
}
刚开始没写 template scope="scope"，然后就不知道el-switch中的v-model的值该怎么获取，后面加上 template scope="scope"， v-model="scope.row.menusstate" 就可以达到想要的效果，关于template scope="scope"的解释，可以看下这篇文：
vue中的scope使用详解
,switch语句求教)
 java: 非法字符: '\u0a0d')
