iview render函数实现switch

武昌库里写JAVA

于 2025-07-26 19:01:01 发布

阅读量166

点赞数

CC 4.0 BY-SA版权

分类专栏：面试题汇总与解析文章标签： spring boot vue.js sql 课程设计 layui

本文链接：https://blog.csdn.net/qq_24428851/article/details/149670774

面试题汇总与解析专栏收录该内容

853 篇文章

订阅专栏

1.1例如：渲染多个组件

{
                title: '操作',
                width: 150,
                render: (h, { row, index }) => {
                    let btn = h('i-switch', {
                    props: {
                        value: row.join_status === 1 ? true : false,
                        size: 'large',
                        loading: row.loading
                    },
                    on: {
                        'on-change': (val) => {
                        this.tabData[index].loading = true
                        if (!val) {
                            this.$Modal.confirm({
                            title: '你确定要禁用该加盟商吗？',
                            content: '<p>禁用将会导致该加盟商下所有人员无法登陆CRM系统</p>',
                            onOk: () => {
                                this.changeChannelStatus(row.id)
                            },
                            onCancel: () => {
                                this.tabData[index].loading = false
                            }
                            });
                            return
                        }
                        this.changeChannelStatus(row.id)
                        }
                    }
                    }, [
                        h('span', {
                        slot: 'open',
                        domProps: {
                            innerHTML: 'ON'
                        }
                        }),
                        h('span', {
                        slot: 'close',
                        domProps: {
                            innerHTML: 'OFF'
                        }
                        })
                    ]
                    )
                    let edit = h('a', {
                    style: {
                        'margin-right': '15px',
                    },
                    on: {
                        click: () => {
                        this.$router.push({ name: 'addJoiner', query: { ...row, tit: '编辑加盟商' } })
                        }
                    }
                    }, '编辑')
                return h('div', [edit, btn])
            }

![图例]

image.png

switch 异步时loading状态

image.png

1.2 自定义组件

  {
          title: '状态',
          render: (h, { row }) => {
            return h(myTag, {
              props: {
                color: row.join_status === 1 ? '#52C41A' : 'red'
              },
              class: {
                'hahah': true
              },
              nativeOn: { //事件
                click: () => {
                  alert(1)
                }
              }
            }, row.join_status === 1 ? '正常' : '解约')
          }
        },

image.png

由此看出配置的参数vlaue支持变量

2、怎么绑定v-model? 这个问题vue官方说了：是没法绑定的，只能自己实现
例如：

 {
          title: '价格',
          key: 'name',
          render: (h, { row, index }) => {
            let input = h('input', {
              domProps: {
                value: row.price,
                type: 'number',
                min: 1
              },
              style: {
                width: '200px',
                display: 'inline-block',
                height: '32px',
                'line-height': 1.5,
              },
              on: {
                change: (event) => { // 实现绑定数据
                  let val = event.target.value
                  this.tabData[index].price = val
                }
              }
            })
            let arr = [input]
            let tip = h('span', {
              style: {
                color: 'red',
                marginLeft: '10px'
              }
            }, '必填，最多保留两位小数')
            if (row.tip) {
              arr.push(tip)
            }
            return h('div', arr)
          }
 }