vue elementui switch开关控件的使用

2018/04/16 23:12
阅读数 82
<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

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部