微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

CoreUI React.js 管理模板 [CDataTable] 过滤嵌套对象

如何解决CoreUI React.js 管理模板 [CDataTable] 过滤嵌套对象

我正在使用 COREUI 管理 React.js 模板。试图过滤搜索字段中的嵌套对象,但无法这样做。谁能告诉我如何过滤 CDataTable 组件中的嵌套对象。

////从API中获取数据

const [imports,setImports] = useState([]);


useEffect(() => {
    let mounted = true;
    getImports()
      .then(items => {
        if (mounted) {
          setImports(items)
        }
      })
    return () => mounted = false;
  },[])

////字段

const fields = [
  { key: 'id',label:'Contract ID',_style: { width: '5%' },_classes: 'font-weight-bold' },{ key: 'productName',_style: { width: '15%' },{ key: 'totalPrice',label:'Price',{ key: 'quantity',_style: { width: '3%' },{ key: 'shipmentDate',_style: { width: '12%' },{ key: 'arrivalDate',{ key: 'paymentTerm',_style: { width: '10%' },{ key: 'status',_style: { width: '6%' },]

////表格组件

 <CDataTable
          items={imports}
          fields={fields}
           columnFilter
           tableFilter={{
            placeholder: "Filter",label: "Search:",}}
          itemsPerPageSelect
          itemsPerPage={5}
          hover
          sorter
          pagination
          striped
          clickableRows
          activePage={page}
          onRowClick={(item) => history.push(`/imports/importproductdetails/${item.id}`)}
          scopedSlots={{
           'productName':
              (items) => (
                <td>
                 <b>{items.productDetails.productName}</b>
                </td>
              ),'shipmentDate':
              (items) => (
                <td>
                 <b>{items.shipmentDetails.shipDate}</b>
                </td>
              ),}}
        />

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。