频道导航

[javascript] elementui下el-switch组件的使用

2021-02-04 JavaScript 前端之家

前端之家收集整理的这篇文章主要介绍了[javascript] elementui下el-switch组件的使用，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

切换状态时使用的这种开关样式的组件,比较显眼和方便

先把html组件结构加上, 尽量把值改成true false的形式,其他值容易出问题,在table中使用如下所示

                                <el-table-column
                                    prop="id"
                                    label=操作">
                                    <template slot-scope=scope">
                                        <el-switch
                                            v-model=scope.row.status
                                            :active-value=true
                                            :inactive-value=false
                                            active-color=#13ce66
                                            inactive-color=#ff4949
                                            @change=switchStatus(scope.row.status,scope.row.id)"
                                            >
                                        </el-switch>
                                        <el-button @click=deleteAccount(scope.row.id)" type=text" size=small">删除</el-button>
                                    </template>
                                </el-table-column>

方法部分这样写

        //切换状态
       switchStatus:function(status,id){
           var data={
               status:status==true?1:0,id:id,}
           $.post(index.PHP?r=media/switchtoutiaoaccoutstatus