React antd 表格组件自定义渲染勾选框和全选功能

要实现的效果如图:

有两列数据要渲染出勾选框,并且右上角有一个全选按钮,其有三种状态,全选,半选,和空状态。

React antd 表格组件自定义渲染勾选框和全选功能_第1张图片

 组件代码:

const columns = [
    {
        title: '第五列'
        dataIndex: 'fifthColumn',
        key: 'fifthColumn',
        render: (value, record) => {
            // 遍历后台返回的数据,后台返回的是用逗号隔开的数据
            const data = value.split(',').map(i => {
                // 拼接一下数据确保唯一性
                return { label: i, value: `${record.firstColumn}-${i}`}; 
            });
            return data?.map((i, idx) => (
                 handleCheckedType(e)}
                >
                    {i.label}
                
            ))
        }
    },
    // 后面略......
];

勾选数据权限:
全选
// 表格里面的勾选框

交互逻辑:

const [numLists, setNumLists] = useState([]); //勾选的数据
const [indeterminate, setIndeterminate] = useState(false); //控制半选状态
const [checkAll, setCheckAll] = useState(false); //控制全选状态

useEffect(() => {
    setNumLists(getNum); // 把表格里面的勾选框全部渲染出来
}, [])

// 包裹table的复选框组
const onChange = e => {
    setIndeterminate(Boolean(e.length) && e.length < getNum.length);
    setNumLists(e);
    setCheckAll(e.length === getNum.length);
};

// 全选按钮
const onCheckAllChange = e => {
    setNumLists(e.target.checked ? getNum : []);
    setIndeterminate(false);
    setCheckAll(e.target.checked);
}

// 把表格里面所有的需要渲染勾选框的数据放进一个数组里面  
// finalData是扁平化之后的数据
const getNum = Array.from(new Set(getTypeNum(finalData))).concat(
    getEnumNum(finalData),
);

你可能感兴趣的:(react.js,javascript,前端)