antd & nested table

antd & nested table

https://codesandbox.io/s/antd-nested-table-pvbdh

width: %

auto equal width

const centerTableColumns = [
  {
    title: "埋点名称",
    dataIndex: "ubt_name",
    key: "ubt_name",
    align: "left",
    // width: 400,
    width: "45%",
    render: (text, record, index) => {
      log(`text, record, index`, text, record, index);
      let result = (
        <span>{text}</span>
      );
      if (record.combination === 1) {
        //一点多埋标记: 0 正常, 1 一点多埋
        let expanded = record.expanded;
        result = (
          <div
            data-uid={expanded}
            >
            {text}
            <Tag color="#108ee9" style={{
              marginLeft: 5,
            }}>一点多埋</Tag>
          </div>
        );
      }
      return result;
    },
    // 专辑详情页-找相似-专辑条
    // 一点多埋
    //
    // <Icon type="down-circle" theme="filled" />
    // <Icon type="up-circle" theme="filled" />
  },
  {
    title: "事件",
    dataIndex: "ubt_event",
    key: "ubt_event",
    align: "center",
    width: "15%",
    render: text => <span>{text}</span>,
  },
  {
    title: "校验结果",
    dataIndex: "check_result",
    key: "check_result",
    align: "center",
    width: "20%",
    // width: 150,
    sorter: (a, b) => a.age - b.age,
    render: (text, record) => {
      let result = ``;
      switch (text) {
        case "0":
          // 埋点失效
          result = <span><Icon type="error" theme="twoTone" twoToneColor="#52c41a" />{text}</span>;
          break;
        case "1":
          // 部分失效/多种错误
          result = <span>{text}</span>;
          break;
        case "2":
          // 属性错误
          result = <span>{text}</span>;
          break;
        case "3":
          // 未埋点
          result = <span>{text}</span>;
          break;
        case "4":
          // 未校验
          break;
        case "5":
          // 埋点正常
          result = <span>{text}</span>;
          break;
        default:
          // 埋点正常
          break;
      }
      return result;
    },
    // onFilter: (value, record) => record.name.includes(value),
    // filters: [{ text: 'Joe', value: 'Joe' }, { text: 'Jim', value: 'Jim' }],
    // filteredValue: "",
  },
  {
    title: "操作",
    dataIndex: "operation",
    key: "operation",
    align: "center",
    width: "15%",
    // width: 100,
    render: (text, record) => {
      return (
        <div>
          <span style={{
            cursor: "pointer",
            color: "#39f",
          }}>查看埋点</span>
        </div>
      );
    },
  },
];

const expandedRowRender = (record, index, indent, expanded) => {
  // Function(record, index, indent, expanded):ReactNode
  log(`record, index, indent, expanded`, record, index, indent, expanded);
  // 埋点名称事件校验结果操作
  const columns = [
    {
      title: "埋点名称",
      dataIndex: "ubt_name",
      key: "ubt_name",
      align: "left",
      width: "45%",
      // width: 400,
      render: text => <span>{text}</span>,
    },
    {
      title: "事件",
      dataIndex: "ubt_event",
      key: "ubt_event",
      align: "center",
      width: "15%",
      render: text => <span>{text}</span>,
    },
    {
      title: "校验结果",
      dataIndex: "check_result",
      key: "check_result",
      align: "center",
      width: "20%",
      // width: 150,
      sorter: (a, b) => a.age - b.age,
      render: (text, record) => {
        let result = ``;
        switch (text) {
          case "0":
            // 埋点失效
            result = <span><Icon type="error" theme="twoTone" twoToneColor="#52c41a" />{text}</span>;
            break;
          case "1":
            // 部分失效/多种错误
            result = <span>{text}</span>;
            break;
          case "2":
            // 属性错误
            result = <span>{text}</span>;
            break;
          case "3":
            // 未埋点
            result = <span>{text}</span>;
            break;
          case "4":
            // 未校验
            break;
          case "5":
            // 埋点正常
            result = <span>{text}</span>;
            break;
          default:
            // 埋点正常
            break;
        }
        return result;
      },
    },
    {
      title: "操作",
      dataIndex: "operation",
      key: "operation",
      align: "center",
      width: "15%",
      // width: 100,
      render: () => <span>&nbsp;</span>,
      // render: (text, record) => {
      //   return (
      //     <div>
      //       <span style={{
      //         cursor: "pointer",
      //         color: "#39f",
      //       }}>查看埋点</span>
      //     </div>
      //   );
      // },
    },
  ];

  let data = [];
  let arr3 = [...new Uint8Array(3)].map((item, i) => (item = i));
  data = arr3.map((item, index) => ({
    id: item + 11,
    ubt_name: "专辑详情页-声音条",
    ubt_event: "点击事件",
    check_result: `${index}`,
    operation: [],
    // combination: Math.random() > 0.5 ? 0 : 1,
    expanded: expanded,
  }));
  return (
  <Table
    bordered={false}
    rowKey={obj => obj.id}
    columns={columns}
    dataSource={data}
    showHeader={false}
    pagination={false} />
  );
};

---

image & colspan

const rightTableColumns = [
  {
    title: "属性",
    dataIndex: "property",
    key: "property",
    align: "left",
    // width: "30%",
    render: (text, row, index) => {
      let {
        isImage,
        url,
      } = row;
      return {
        children: (
          isImage
          ?
          <img src={url} alt={text} />
          :
          <span>{text}</span>
        ),
        props: {
          colSpan: isImage ? 2 : 1,
        },
      };
    },
  },
  {
    title: "校验结果",
    dataIndex: "checkResult",
    key: "checkResult",
    align: "center",
    render: (text, row, index) => {
      let {
        isImage,
      } = row;
      return {
        children: <span>{text}</span>,
        props: {
          colSpan: isImage ? 0 : 1,
        },
      };
    },
  },
];

const properties = [
  {
    "name" : "currPage",
    "value" : "",
    "checkResultDesc" : "属性为空"
  },
  {
    "name" : "pageShowNum",
    "value" : "",
    "checkResultDesc" : "属性值格式错误"
  },
  {
    "name" : "pageStayTime",
    "value" : "",
    "checkResultDesc" : "属性未找到"
  },
  {
    "name" : "srcModule",
    "value" : "",
    "checkResultDesc" : "属性未找到"
  },
  {
    "name" : "prePage",
    "value" : "",
    "checkResultDesc" : "属性未找到"
  },
  {
    "name" : "vpIndex",
    "value" : "",
    "checkResultDesc" : "属性未找到"
  },
];

let rightDataSource = [];

rightDataSource = properties.map((obj, i) => {
  let {
    name,
    checkResultDesc,
    // value,
  } = obj;
  return {
    id: i + 1,
    property: name || "",
    checkResult: checkResultDesc || "",
    isImage: false,
  };
});

// url
rightDataSource.push({
  id: properties.length + 1,
  property: "",
  checkResult: "",
  isImage: true,
  url: "https://axure-file.lanhuapp.com/9b3779c0-f3bd-4bc1-a543-3a81cb2f0bf3__61aab07f4f352d02b667e772b422548c",
});

refs

---

---

©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---