iview使用render函数在列表页生成状态列表并修改

ゝ一世哀愁。 2022-10-01 12:57 151阅读 0赞

只贴出核心代码

截图如下，点击下拉菜单即可修改项目发布状态，显示的内容根据字段status来判断，status为0时未发布，为1时已发布

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5NjYzMg_size_16_color_FFFFFF_t_70][]

说明：handleEditStatus方法中只是修改状态，不影响前台显示

columns: [{
                title: '项目状态',
                key: 'status',
                minWidth: 80,
                align: 'center',
                render: (h, params) => {
                  let butType, butName
                  switch (params.row.status) {
                    case 0:
                      butType = 'warning'
                      butName = '未发布'
                      break
                    case 1:
                      butType = 'primary'
                      butName = '已发布'
                      break
                    default:
                      butType = 'warning'
                      butName = '未发布'
                  }
                  return h('div', [
                    h('Poptip', {
                      id: 'but_poptip',
                      class: 'but_poptip',
                      props: {
                        placement: 'bottom',
                        width: '85px'
                      }
                    }, [
                      h('Button', {
                        props: {
                          type: butType,
                          size: 'small'
                        },
                        style: {
                          marginRight: '5px'
                        }
                      }, butName),
                      h('div', {
                        class: 'api',
                        slot: 'content'
                      }, [
                        h('ButtonGroup', {
                            props: {
                              vertical: true,
                              size: 'small'
                            }
                          },
                          [
                            h('Button', {
                              props: {
                                type: 'warning'
                              },
                              on: {
                                click: () => this.handleEditStatus(params.row, 0)
                              }
                            }, '未发布'),
                            h('Button', {
                              props: {
                                type: 'primary'
                              },
                              on: {
                                click: () => this.handleEditStatus(params.row, 1)
                              }
                            }, '已发布')
                          ])
                      ])
                    ])
                  ])
                }
              }
    
    methods:{
        // 修改发布状态
          handleEditStatus(val, status) {
            debugger
            // 其他逻辑部分。。。
          },
    }
    
    <style lang="less">
      .but_poptip .ivu-poptip-popper{
        min-width: 80px!important;
      }
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTk5NjYzMg_size_16_color_FFFFFF_t_70]: /images/20220118/fd645c0487db4d4e8ede073a29879933.png