我使用的是element ui V1.4.3

如下圖是我要實現(xiàn)的效果：

點擊顯示 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:"基礎(chǔ)信息管理",

menusstate:false,

},

{

name:"監(jiān)管報表",

menusstate:false,

},

{

name:"劃款指令",

menusstate:false,

},

{

name:"基礎(chǔ)信息管理",

menusstate:false,

},

{

name:"監(jiān)管報表",

menusstate:false,

},

{

name:"劃款指令",

menusstate:false,

},

{

name:"基礎(chǔ)信息管理",

menusstate:false,

},

{

name:"監(jiān)管報表",

menusstate:false,

},

{

name:"劃款指令",

menusstate:false,

},

{

name:"基礎(chǔ)信息管理",

menusstate:false,

},

{

name:"監(jiān)管報表",

menusstate:false,

},

{

name:"劃款指令",

menusstate:false,

},

{

name:"基礎(chǔ)信息管理",

menusstate:false,

},

{

name:"監(jiān)管報表",

menusstate:false,

},

{

name:"劃款指令",

menusstate:false,

},

{

name:"基礎(chǔ)信息管理",

menusstate:false,

},

{

name:"監(jiān)管報表",

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" 就可以達到想要的效果，關(guān)于template scope="scope"的解釋，可以看下這篇文：

vue中的scope使用詳解

總結(jié)

以上是生活随笔為你收集整理的elementui 按钮 表单_element UI实现表格中添加开关控制按钮的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。