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

只贴出核心代码

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

说明：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>