antd中表格的字段设置成掩码

这里写图片描述

如上图所示,是一个利用antd制作的一个表格,现在讲微信里面的字段设置成掩码格式。

代码:

const columns = [
      {
        title: '用户编号',
        dataIndex: 'originalId',
        key: 'originalId',
        width: 70,
      },
      {
        title: '微信号',
        dataIndex: 'wxCode',
        key: 'wxCode',
        width: 70,
        render: (value) => <Input compact={true} value={value} disabled="false" type="password"/>
      },
      {
        title: '是否有效',
        dataIndex: 'status',
        key: 'status',
        width: 70,
        render: (value) => ValidStatus.getTextFromValue(value)
      },
      {
        title: '昵称',
        dataIndex: 'nickname',
        key: 'nickname',
        width: 70
      }
      ]

在微信字段出设置一个render,里面嵌入一个 input框。


然后清除掉 input的样式:

.ant-input {
  width: 100%;
  height: 28px;
  border: 0px;
  outline: none;
  cursor: pointer;
  background: transparent;
}

猜你喜欢

转载自blog.csdn.net/qq_24147051/article/details/80578187