vue render 函数进行条件判断,然后创建标签

效果如下所示:
在这里插入图片描述
要求:
在表格中,审核状态为“待审核”时,多出“审核”按钮

如下所示进行判断:

render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'text',
                  size: 'small'
                },
                style: {
                  color: '#2d8cf0'
                },
                on: {
                  click: () => {
                    this.toEditColor(params.row)
                  }
                }
              }, '查看'),
              ( params.row.Review === '待审核' ) && h('Button', {
                props: {
                  type: 'text',
                  size: 'small'
                },
                style: {
                  color: '#2d8cf0'
                },
                on: {
                  click: () => {
                    this.toEditColor(params.row)
                  }
                }
              }, '审核')
            ]
            )
          }

在这里插入图片描述

  • 6
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue是一款非常流行的JavaScript框架之一,其渲染函数renderVue中非常重要的一部分,用于处理如何将组件渲染为虚拟DOM。在render函数中,我们可以使用条件判断语句来根据不同的情况渲染不同的内容。 比如,我们可以使用if/else语句或者三元表达式来实现条件判断。例如,我们可以通过判断props中的值是否为true,来决定是否渲染特定的内容: ```javascript render(h) { return h('div', [ this.props.isTrue ? h('p', '这是真的') : h('p', '这是假的') ]) } ``` 另外,我们还可以使用switch/case语句来处理多个不同的情况,例如: ```javascript function getComponentType(type) { switch (type) { case 'text': return TextComponent case 'photo': return PhotoComponent case 'video': return VideoComponent default: return TextComponent } } render(h) { const Component = getComponentType(this.props.type) return h(Component, { props: { data: this.props.data } }) } ``` 在这个例子中,我们使用switch/case语句来选择不同类型的组件,然后将渲染后的组件返回。这样可以使得组件逻辑更加灵活,根据不同的props渲染不同的内容。 总之,使用条件判断语句来渲染不同的内容是Vue的一个非常重要的功能,在render函数中使用条件判断可以使得组件的逻辑更加灵活,实现更多的功能。但是我们需要注意代码的可读性和维护性,避免嵌套过深和代码过于复杂。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值