基于Antd Table自定义通用columns列筛选配置

最近因为工作需要,用到了富文本编辑器让用户填写反馈,上传图片等功能,经过一些对比选择了tinymce,记录下图片相关问题。

完整版封装的组件代码,放到最后。

环境

  • vue2.x
  • tinymce 5.10.3
  • tinymce-vue 2.1.0

这里由于开发环境是vue2,所以目前这个时间点,需要选择版本的去安装,引用官方文档的一句话

Version 4 of the tinymce-vue package supports Vue.js 3.x, but does not support Vue.js 2.x. For Vue.js 2.x applications, use tinymce-vue version 3.

图片上传

这个比较简单,在_init的配置中,配置images_upload_handler_

...
data () {init: {images_upload_handler:this.handleImageUpload}
},
methods: {handleImageUpload (blobInfo, success, failure) {// 将图片上传到服务器.let formdata = new FormData()formdata.append('file', blobInfo.blob(), blobInfo.filename())this.uploadImage(formdata).then(success).catch(failure)},uploadImage (formdata) {return new Promise((resolve, reject) => {Axios({url: 'https:
在使用 Ant Design 的 `Table` 组件时,如果需要实现自定义筛选功能并获取筛选后的数据集,可以通过结合 `filters` 和 `onFilter` 属性来完成。这些属性允许开发者定义筛选条件,并通过回调函数处理数据的过滤逻辑。 ### 自定义筛选配置配置中,可以为某一设置 `filters` 来定义筛选菜单中的选项,并通过 `onFilter` 定义一个函数来决定哪些数据应该被显示。例如,在以下代码中,针对 `address` 设置了两个筛选项("London" 和 "New York"),并且定义了一个 `onFilter` 函数来匹配记录的地址: ```javascript { title: 'Address', dataIndex: 'address', filters: [ { text: 'London', value: 'London' }, { text: 'New York', value: 'New York' }, ], onFilter: (value, record) => record.address.indexOf(value) === 0, } ``` 在这个例子中,`onFilter` 函数会根据用户选择的筛选值对数据进行过滤[^2]。 ### 获取筛选后的数据集 要获取筛选后的数据集,可以在组件的状态中维护当前的筛选条件,并在 `onFilter` 函数中更新这个状态。这样,当用户更改筛选条件时,可以重新计算出当前显示的数据集。具体来说,可以将 `onFilter` 函数替换为一个自定义函数,该函数不仅执行数据过滤,还更新状态以反映当前的筛选情况。 下面是一个示例代码片段,展示了如何通过维护状态来获取筛选后的数据集: ```javascript import React, { useState } from 'react'; import { Table } from 'antd'; const CustomFilterTable = ({ data }) => { const [filteredData, setFilteredData] = useState(data); const handleFilter = (value, record) => { // 这里可以根据实际需求修改过滤逻辑 const result = record.address.indexOf(value) === 0; if (result) { setFilteredData(prevData => [...prevData, record]); } return result; }; const columns = [ { title: 'Address', dataIndex: 'address', filters: [ { text: 'London', value: 'London' }, { text: 'New York', value: 'New York' }, ], onFilter: handleFilter, }, // 其他配置... ]; return <Table dataSource={filteredData} columns={columns} />; }; export default CustomFilterTable; ``` 在这个示例中,`handleFilter` 函数负责更新 `filteredData` 状态,从而保存筛选后的数据集。需要注意的是,这里的实现仅作为演示目的,实际应用中可能需要更复杂的逻辑来确保数据的一致性和性能。 ### 性能考虑 对于大数据量的情况,直接在前端进行筛选可能会导致性能问题。在这种情况下,建议采用分页加载或者后端筛选的方式,以提高用户体验和应用的响应速度。Ant Design 的 `Table` 组件支持分页功能,可以通过设置 `pagination` 属性来启用它[^4]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值