ant-design / pro-components

🏆 Use Ant Design like a Pro!
https://pro-components.antdigital.dev
MIT License
4.31k stars 1.36k forks source link

🐛[BUG]columns的width无效 #88

Closed haoyinag closed 4 years ago

haoyinag commented 4 years ago

columns添加了width无效,本想横向滚动的

// 列配置
  let columns: ProColumns<TableListItem>[] = [
    {
      title: "序号",
      dataIndex: "id",
      width: 5 * 10,
      hideInSearch: true,
      valueType: "index",
      // render: (text) => <Badge count={"新"}>{text}</Badge>,
      render: (text, row: any) =>
        row.newDeal === "Y" ? <Badge count={"新"}>{text}</Badge> : text,
    },
    {
      title: "线路号",
      dataIndex: "routeNo",
      width: 78,
      sorter: true,
    },
    ...searchSelectColumns,
    {
      title: "订单编号",
      hideInSearch: true,
      dataIndex: "dealId",
      width: 145,
      render: (_, row) => (
        <span
          style={
            Array.isArray(row.changeField) && row.changeField.includes(3)
              ? orangeText
              : {}
          }
        >
          {_}
        </span>
      ),
    },
    {
      title: "配送单号",
      dataIndex: "deliveryNo",
      width: 4 * 20,
      hideInSearch: true,
      render: (text) => `#${text}`,
      rules: [
        () => ({
          validator(rule, value) {
            if (value) {
              if (isNaN(Number(value))) {
                return Promise.reject("请输入数字");
              } else if (Number(value) > 2147483647) {
                // 不能超过2147483647 否则接口报错
                return Promise.reject("请输入正确的配送单号");
              }
            }
            return Promise.resolve();
          },
        }),
      ],
    },
    {
      title: "批次",
      dataIndex: "batch",
      width: "60px",
      sorter: true,
      renderFormItem: (_) => {
        return (
          <Select placeholder="批次">
            {batchList.map((item: any) => (
              <Option key={item.batchNo} value={item.batchNo}>
                {item.batchNo}
              </Option>
            ))}
          </Select>
        );
      },
    },]

上面只是clumns的部分列,由于列比较多,想通过添加width达到横向滚动,结果完全没作用,列的内容完全挤在一起了

© 版本信息

 "@amap/amap-jsapi-types": "^0.0.4",
    "@ant-design/pro-layout": "^5.0.9",
    "@ant-design/pro-table": "^2.2.7",
    "@types/jest": "^25.2.1",
    "@types/react": "^16.9.34",
    "@umijs/hooks": "^1.9.2",
    "@umijs/preset-react": "1.x",
    "@umijs/test": "^3.1.1",
    "antd-dayjs-webpack-plugin": "^1.0.0",
    "cross-env": "^7.0.2",
    "html2canvas": "^1.0.0-rc.5",
    "lint-staged": "^10.0.7",
    "postcss-px-to-viewport": "^1.1.1",
    "prettier": "^2.0.5",
    "react": "^16.12.0",
    "react-amap": "^1.2.8",
    "react-dom": "^16.12.0",
    "stylus": "^0.54.7",
    "stylus-loader": "^3.0.2",
    "ts-md5": "^1.2.7",
    "typescript": "^3.8.3",
    "umi": "^3.1.1",
    "yorkie": "^2.0.0"

🚑 其他信息

chenshuai2144 commented 4 years ago

dup of https://github.com/ant-design/pro-components/issues/592