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

唯一Chat

发布于 2020-05-26 23:25:24

9200

发布于 2020-05-26 23:25:24

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

先把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",data); 
       },