vue element table switch开关组件

<template><!--data绑定整个列表--><el-table:data="tableData"style="width: 100%"><!--prop用来绑定列明,对应对象的key--><el-table-columnprop="name"label="姓名"width="180"></el-table-column><!--使用switch组件来渲染开关--><el-table-columnlabel="状态"width="180"><template slot-scope="scope"><el-switchv-model="scope.row.state"active-color="#13ce66"inactive-color="#ff4949"></el-switch></template></el-table-column><!--使用template的slot-scope来接收当前行的数据,用来定制化数据,比如取年份--><el-table-columnlabel="详细数据"><template slot-scope="scope">{{scope.row}}</template></el-table-column></el-table>
</template><script>
export default {name: 'Home',data () {return {tableData: [{name: '王小虎',state: true}, {name: '王小虎',state: false}]}}
}
</script>
<style scoped></style>

vue element table switch开关组件相关推荐

Element ui Switch 开关二次确认弹窗后再更改开关状态
Element ui Switch 开关二次确认弹窗后再更改开关状态 Switch 开关基本用法 Events 重点: 禁用状态 Switch 开关表示两种相互对立的状态间的切换,多用于触发「开/ ...
动态处理表格多行合并单元格、同时解决hover错乱问题 - Vue Element Table
简介: el-table单元格合并,处理hover错乱问题,自定义底部合计栏. 如图所示: 源码(复制另存txt,修改.html直接运行) <!DOCTYPE html> <html ...
vue element table 相关页面跳转实例代码
vue element table 相关页面跳转实例代码 <el-table-column width="100px" align="center" la ...
手撸一个Switch开关组件
一.前言手撸系列又来了,这次咱们来撸一个Switch开关组件,废话不多说,咱们立刻发车. 二.使用效果三.实现分析首先我们先不想它的这个交互效果,我们就实现"不合格"时的一个 ...
Vue + Element + Table 分页选择勾选和取消勾选的问题
Vue + Element + Table 分页选择勾选和取消勾选的问题问题描述: 需求是这样的===>表格前面每条数据都有复选框吧然后表格有很多页 , 我从第一页选取N条数据再去其他页 ...
VUE+ ELEMENT 选人的弹窗组件
** VUE+ ELEMENT 封装的一个选人的弹窗组件 ** 需求如下: 1.要有部门分类 2.能选人(同时可以选择整个部门) 3.保留原选中的人的不去除 4.能搜索,显示搜索结果的时候不显示部门 ...
vue - element ＜upload＞组件批量上传文档，可携带其他表单数据项一同与文件 “手动提交“ 服务器（类似百度文库系统批量上传前端界面与逻辑）超详细教程示例源码，提供界面与逻辑完整源码
效果图本示例使用的是 element 组件库,其实什么组件库都行(逻辑是一样),只要你是 vue.js 项目就能使用本教程. 本文实现了 vue + element 使用 upload 组件批量上传 ...
基于vue element 封装上传组件
基于vue element封装的上传组件使用方法: 1.首先引入该组件 2.注册组件 3.页面使用 4.回调函数(如需其他回调自行封装因为我暂时没用到其他的哈哈哈) <template& ...
Vue Element table表格实现表头自定义多类型动态筛选 , 目前10种筛选类型，复制即用
一.效果图目前10种筛选类型看看是否是你需要的,本文可能有点长 ,我尽可能的给讲清楚,包括源码附上二.无聊发言点击当前行跳转部分数据后缀追加图标某列数据根据状态增加颜色标识三.前言实现 ...

vue element table switch开关组件

vue element table switch开关组件相关推荐

最新文章

热门文章