elementui 按钮 表单_element UI实现表格中添加开关控制按钮
我使用的是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使用詳解
總結
以上是生活随笔為你收集整理的elementui 按钮 表单_element UI实现表格中添加开关控制按钮的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mysql 体重 类型 身高_体重较轻，
- 下一篇： e盾网络验证源码_Laravel [me