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

巴特西

vue elementui switch开关控件的使用

最新文章

热门文章