热门标签
热门文章
- 1『Kafka』在Docker中快速部署Kafka及其管理平台搭建_kafka管理平台
- 2Cesium 三维热力图_cesium 热力图
- 3前端 JS 经典：变量交换_js [a,b] = [b,a]
- 4cmd命令行怎样运行python,在CMD命令行中运行python脚本的方法
- 5计算机毕业设计hadoop+spark+hive新能源汽车数据分析可视化大屏 汽车推荐系统 新能源汽车推荐系统 汽车爬虫 汽车大数据 机器学习 大数据毕业设计 深度学习 知识图谱 人工智能_基于hive的新能源汽车统计分析
- 6Python小记：14.数据分析基础知识点汇总_33ax,xffts
- 7浅谈医疗AI软件测试技术发展_ct ai 分析 试用
- 8蛋糕商城项目完整源码_javaweb程序设计蛋糕商城注册页面源代码
- 9使用python进行傅里叶FFT-频谱分析详细教程
- 10如何做到数据防篡改
当前位置: article > 正文
ElementUI之 switch开关_elementui switch
作者：知新_RL | 2024-06-20 14:58:21
赞
踩
elementui switch
html
<el-table-column label="上下架" width="100px" align="center">
<template slot-scope="{row}">
<el-switch
v-model="row.shelf_state"
class="switch"
:active-value="1"
:inactive-value="0"
active-text="上架"
inactive-text="下架"
@change="handleStatusChange($event,row)"
/>
</template>
</el-table-column>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
css
<style> /* switch按钮样式 */ .switch .el-switch__label { position: absolute; display: none; color: #fff !important; } /*打开时文字位置设置*/ .switch .el-switch__label--right { z-index: 1; } /* 调整打开时文字的显示位子 */ .switch .el-switch__label--right span{ margin-right: 9px; } /*关闭时文字位置设置*/ .switch .el-switch__label--left { z-index: 1; } /* 调整关闭时文字的显示位子 */ .switch .el-switch__label--left span{ margin-left: 9px; } /*显示文字*/ .switch .el-switch__label.is-active { display: block; } /* 调整按钮的宽度 */ .switch.el-switch .el-switch__core, .el-switch .el-switch__label { width: 70px !important; margin: 0; } </style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
js
handleStatusChange(data, row) {
stateUpdata({ id: row.id, shelf_state: data }).then(response => {
if (response.code === 20000) {
this.$message({
type: '成功',
message: '操作成功!'
})
} else {
this.$message({
type: '失败',
message: '操作失败!'
})
}
})
},
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/740160?site
