介绍

网址：https://www.uviewui.com/components/switch.html
在渲染的列表中使用

案例演示

代码

<view class="item" v-for="(item,index) in list" :key="index"><view class="switchBox"><u-switch v-model="item.status == 0 ? false : true" :activeValue="true" :inactiveValue="false"asyncChange @change="asyncChange(item)" inactiveColor="#BFBFBF" activeColor="#62C0AD"></u-switch></view>
</view>

export default {data() {return {//0禁用、1开启list: [{name："内容1",status:0},{name："内容2",status:1},{name："内容3",status:0},]}},methods: {asyncChange(item) {console.log(item);uni.showModal({title: '提示',content: `你确定要${item.status == 0?'开启':'禁用'}吗`,confirmColor: '#63C0AD',success: (res) => {if (res.confirm) {// 调用状态修改接口this.$common.request('post', '/agent/index/saveDistributorsStatus', {id: item.id,}).then(res => {console.log(res);if (res.code = 1) {this.$common.success(res.msg)this.getList()}})}}})},}
}

uview——switch开关列表修改状态相关推荐

前端学习（2717）：重读vue电商网站37之通过switch开关更改用户状态
首先,在 switch 开关添加一个 change 事件,并且通过作用域插槽的形式,将该行数据作为参数传入,目的是为了后续的修改. 在函数内我们将传递过来的参数作为我们请求的参数,通过 put 方式修 ...
Element ui Switch 开关二次确认弹窗后再更改开关状态
Element ui Switch 开关二次确认弹窗后再更改开关状态 Switch 开关基本用法 Events 重点: 禁用状态 Switch 开关表示两种相互对立的状态间的切换,多用于触发「开/ ...
element-ui 点击Switch开关弹出对话框确认后再改变switch开关状态
前言最近项目中用到了Switch开关组件,需求是点击switch开关按钮后,弹出一个确认对话框,根据用户的操作来决定是否改变switch的开关状态. Attributes 参数说明类型默认值 ...
elementUI switch 开关状态更新到数据库
配合 slot-scope 作用域插槽使用 scope.row 可以获取当前所在行的每项数据 1.监听 switch 开关的 change事件拿到最新状态 2.发送请求调用接口同步数据 ...
layui 列表上面的switch开关切换
layui 列表上面的switch开关切换 HTML html <input type="checkbox" name="state" value = { ...
CSS做个Switch开关
Switch开关: 根据需求可知,Switch开关只有两种选择,true或false.所以我们想到HTML的checkbox控件,用它来做. <input id="switch&quo ...
Bootstrap Switch 开关控件
Bootstrap Switch开关控件网址:http://www.bootcss.com/p/bootstrap-switch/ 引入. Bootstrap Switch插件和依赖插件,并初始化开关 ...
LayUi使用switch开关，动态的去控制它是否被启用
layui中的switch开关,能够去显示当前的状态,是否是启用还是禁用.当时如果当前记录的某个值没有进行填写,这行记录就不能被启用.并且页面上也要让他不能进行操作. 直接上代码: // 页面状态栏事 ...
[uniapp][swtich开关]阻止切换状态(类似阻止事件冒泡)
uniapp 的switch按钮是默认点击后就切换状态的,但是有时回根据业务需求提前进行业务流程判断后再提示开关启闭状态. 比如,我有个开关是开启用户信息采集的,点击开关后需要弹框等在用户确认后在更改 ...

uview——switch开关列表修改状态

介绍

案例演示

代码

uview——switch开关列表修改状态相关推荐

最新文章

热门文章

uview——switch开关 列表修改状态

介绍

案例演示

代码

uview——switch开关 列表修改状态相关推荐

最新文章

热门文章

uview——switch开关列表修改状态

uview——switch开关列表修改状态相关推荐