vue中的jsx语法用于element表格

用于element中的表格操作按钮区域

1. 正常的写法

{
  label: '编辑',
  prop: '',
  width: 150,
  render: (h, { row }) => {
    const { online } = row;
    return h('div', [
      h('el-button', {
        props: {
          type: 'primary',
          size: 'small',
        },
        on: {
          click: () => {
            that.paymentTime.restaurantId = row.restaurantId;
            that.dialogTableVisible = true;
          },
        },
      }, '缴费'),
      h('el-button', {
        props: {
          type: online ? 'success' : 'danger',
          size: 'small',
        },
        on: {
          click: () => {
            const { restaurantId } = row;
            if (online) {
              // 启用  点击 参数0
              that.startAndStop(restaurantId, 0);
            } else {
              that.$confirm('您确定要执行停用操作吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
              }).then(() => {
                that.startAndStop(restaurantId, 1);
              }).catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消停用操作',
                });
              });
            }
          },
        },
      }, online ? '启用' : '停用'),
    ]);
  },
},

2. 简单的写法

{
  label: '编辑',
  prop: '',
  width: 150,
  render: (h, { row }) => (
    <div>
      <el-button
        type="primary"
        size="small"
        onClick={ () => {
          that.paymentTime.restaurantId = row.restaurantId;
          that.dialogTableVisible = true;
        }}
      >
      缴费
      </el-button>
      <el-button
        type={ row.online ? 'success' : 'danger' }
        size="small"
        onClick={ () => {
          const { restaurantId } = row;
          if (row.online) {
            // 启用  点击 参数0
            that.startAndStop(restaurantId, 0);
          } else {
            that.$confirm('您确定要执行停用操作吗？', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            }).then(() => {
              that.startAndStop(restaurantId, 1);
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消停用操作',
              });
            });
          }
        }}
      >
      {row.online ? '启用' : '停用'}
      </el-button>
    </div>
  ),
},