react 动态显示表格操作列中的按钮

啵啵怪_

已于 2023-01-03 11:14:25 修改

阅读量608

点赞数

分类专栏： react 文章标签： react.js

于 2023-01-03 11:12:12 首次发布

本文链接：https://blog.csdn.net/weixin_45609659/article/details/128529887

版权

react 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

根据返回的status为0或1 ，通过style控制display属性，来显示禁用或启用

   {
      title: '操作',
      valueType: 'option',
      key: 'option',
      width: '280px',
      render: (text, record, _, action) => [
        <a
          key="downLoad"
          onClick={() => {
            downLoadFile(record)
          }}
        >
         下载
        </a>,
        <a
          key="enable"
          style={{ display: record.status === 1 ? 'inline-block' : 'none' }} //启用
          onClick={() => {
            changeStatus(record.id, '0')
          }}
        >
         启用
        </a>,
        <a
          key="disable"
          style={{ display: record.status === 0 ? 'inline-block' : 'none' }} //禁用
          onClick={() => {
            changeStatus(record.id, '1')
          }}
        >
           禁用
        </a>,
        <a
          key="edit"
          onClick={() => {
            displayAddOrEditDialog(2, record)
          }}
        >
           编辑
        </a>,
        <a
          key="delete"
          onClick={() => {
            handleDelete(record.id)
          }}
        >
         删除
        </a>,
      ],
    },

效果如下，“启用”和“禁用”不在一列
在这里插入图片描述
使用JSX

render: (text, record, _, action) => [
        <a
          key="downLoad"
          onClick={() => {
            downLoadFile(record)
          }}
        >
         下载
        </a>,
        record.status === 1 ? ( //启用
          <a
            key="enable"
            onClick={() => {
              changeStatus(record.id, '0')
            }}
          >
           启用
          </a>
        ) : null,
        record.status === 0 ? ( //禁用
          <a
            key="disable"
            onClick={() => {
              changeStatus(record.id, '1')
            }}
          >
           禁用
          </a>
        ) : null,

        <a
          key="edit"
          onClick={() => {
            displayAddOrEditDialog(2, record)
          }}
        >
          编辑
        </a>,
        <a
          key="delete"
          onClick={() => {
            handleDelete(record.id)
          }}
        >
         删除
        </a>,
      ],