好久没写东西, 刚好之前有人问, iview 的表格, 怎么增加 switch 开关.
然后自己去试了一下, 感觉使用 render, 其实和官网的那个 button 的方法差不多.
- <template>
- <Table :columns="columns1" :data="data1"></Table>
- </template>
- <script>
- export default {
- data () {
- return {
- columns1: [
- {
- title: '表头',
- key: 'name' // 对应 data1 的 name
- },
- {
- title: '操作',
- render: (h, params) => { // 重点
- let vm = this;
- return h('i-switch', { // 这里和按钮类似, 按钮可以看官网
- props: { // 属性值也类似
- value: params.row.status, //switch:true 或 false 状态值
- // disabled: true // 设置是否禁用
- },
- on: { // 操作事件
- input: function (event) { // 监听的作用切换 true 和 false
- if (event) { params.row.status = true } else { params.row.status = false }
- //
- },
- 'on-change': function () { // 值发生了改变调用
- vm.demo() // 方法自定义
- }
- }
- })
- }
- }
- ],
- data1: [ // 后台返回的数据
- {
- name: 'hello',
- status: true,
- }
- ],
- }
- },
- methods: {
- demo(){
- console.log(2121);
- }
- }
- }
- </script>
样式有点乱, 勿怪, 有啥问题, 可以一起讨论, 欢迎纠错
来源: http://www.qdfuns.com/article/47152/dba32cb1ee5a9f7475fa3bb0bf03eb42.html