vue elementui switch開關控件的使用

<el-switch @change="test" on-value="1" off-value="0" v-model="value1">

data () { return{ value1: '1' } }

methods:{
    test (val) { console.log(val) } }

element-ui的table和switch相組合，寫了個例子：

<el-table :data="csData" tooltip-effect="dark" border stripe style="width: 100%"> <el-table-column type="index" label="序號" align="center" width=""></el-table-column> <el-table-column prop="name" label="名稱" header-align="center" align="right"></el-table-column> <el-table-column label="操作" align="center" width=""> <template slot-scope="scope"> <el-switch v-model="scope.row.on" on-color="#00A854" on-text="啟動" on-value="1" off-color="#F04134" off-text="禁止" off-value="0" @change="changeSwitch(scope.row)"> </el-switch> </template> </el-table-column> </el-table>

data () {
    return {  csData: [ {  name: '一',  on: '0' }, {  name: '二',  on: '1' } ] } }

methods:{
    changeSwitch (data) { console.log(data) } }

效果如下：

原始數據第一行是，on是'0',點擊后console出來，發現值改變了

再點一次，又對應改變了

總結一下，@change="func"是默認傳過來的就是對應的on值，@change="func(data)"如果是某一條數據的完整的data