实现表格中的el-switch 开关切换

一、目的：

vue项目实现表格中的el-switch 开关切换请求后台接口，请求成功则开启成功，请求失败则处于关闭状态

二、实现步骤：

1、html部分：

<template slot-scope="scope"><el-switchv-model="scope.row.status"active-color="#13ce66"inactive-color="#ff4949":active-value="1":inactive-value="0"@change="changeStatus($event,scope.row,scope.$index)"/>
</template>

2、script部分

export default{data():return{tableData:[],//存表格的数据容器
}
methods:{//改变表格中的el-switch开关状态changeStatus(e,row,index){        //e表示el-switch的状态（true，false）//请求接口axios.post('xxxxxxx-url'，{ status: e ? 1 : 0 }).then(res => {console.log('切换状态成功');//TODO ：刷新列表数据}).catch(err => {console.log('切换状态失败');let newData = row;newData.status = newData.status === 1 ? 0 : 1;//恢复 原状态this.tableData[index] = newData;})}
}
}

实现表格中的el-switch 开关切换相关推荐

layui 列表上面的switch开关切换
layui 列表上面的switch开关切换 HTML html <input type="checkbox" name="state" value = { ...
ace admin switch 开关中英文切换
今天在开发项目的时候,遇到了ace admin switch开关切换的问题,默认的是英文,想改为中文,一开始以为是在js中控制的,可是找了很久都没有找到,后来在ace.min.css中找到了input ...
html switch开关实现隐藏,css3实现switch开关效果
之前阿里电面的时候问的一个问题,今天抽时间做了个demo. html结构 css代码,:before负责颜色,:after是那个白色小圆点,切换时的过渡效果用css3的动画实现. .switch{ d ...
微信小程序主题皮肤切换（switch开关）
示例效果: 功能点分析: 1.点击switch开关,切换主题皮肤(包括标题栏.底部tabBar): 2.把皮肤设置保存到全局变量,在访问其它页面时也能有效果 3.把设置保存到本地,退出应用再进来时,依 ...
电子表格多轴图表_如何在Google表格中切换图表轴
电子表格多轴图表 When you're creating graphs or charts in Google Sheets, you don't need to stick with the de ...
UI设计中switch开关设计总结
UI设计创新技能层出不穷,UI设计满足着形形色色各种垂直化的需求,在设计方面大家也是想方设法去做一些创新,希望自己能够在各种应用中脱颖而出,今天我就针对UI设计中switch开关设计总结进行简单的说明 ...
【小程序】手动实现switch开关中带文字效果（开关左右文字相同/不同都可以）
最终效果: 左右文字宽度相同左右文字宽度不同左右长度相同效果:配合wx:show切换注意:左右长度相同的话可以设置合适的相同的宽度. html: <view class="sw ...
android开发中Switch开关在Dialog中不显示
今天遇到个问题,在dialog中switch开关不显示,而且还把texton 与textoff默认定为"开启","关闭".百度无果.google随便找了下也只看 ...
layui修改table中的按钮_layui数据表格中如何设置按钮切换（是否置顶）与分页居中...
手记1 一.数据表格中按钮切换(置顶与取消) 在layUI数据表格中是可以使用toolbar设置表格内的按钮使用laytel语法置顶 {{# if(d.order>0){ }} 取消 {{ ...

实现表格中的el-switch 开关切换

一、目的：

二、实现步骤：

1、html部分：

2、script部分

实现表格中的el-switch 开关切换相关推荐

最新文章

热门文章