本文介绍了如何使用React和Ant-Design库来开发一个带有复杂操作的表格列表，包括创建账号、账号状态冻结与解冻、查看详情以及角色分配功能。详细阐述了组件的渲染逻辑，如根据角色值展示不同文案，以及操作按钮的控制逻辑。同时，还展示了新建账号的弹框实现，以及新增接口的调用流程。
const columns = useMemo(
() => [
{
title: ‘序号’,
dataIndex: ‘_id’
},
{
title: ‘用户名’,
dataIndex: ‘username’
},
{
title: ‘角色’,
width: 80,
dataIndex: ‘roles’, //[‘1’,‘2’] [‘1’]
// render: (value: any) => (
// <>
// {value === 1 && <>前台用户</>}
// {value === 2 && <>后台技术服务</>}
// </>
// )
render: (value: any) => {
var str = ‘’
if (value.length == 1) {
value.forEach((element: number) => {
if (element === 1) {
str = ‘前台用户’
} else {
str = '后台技术服务 ’
}
})
} else {
value.forEach((element: number) => {
// console.log(element)
if (element === 1) {
str = str + ‘前台用户,’
} else {
str = str + '后台技术服务 ’
}
})
}
if (str.length <= 5) {
return str
} else {
return {str.substring(0, 5) + ‘…’}
}
}
},
{
title: ‘企业名称’,
dataIndex: ‘firmName’,
render: (record: any) => {
if (record.length <= 5) {
return record
} else {
return (
{record.substring(0, 5) + ‘…’}
)
}
}
},
{
title: ‘手机号码’,
dataIndex: ‘mobile’,
render: (record: any) => {…},
{
title: ‘邮箱’,
dataIndex: ‘email’,
render: (record: any) => {…}
},
{
title: ‘地址’,
dataIndex: ‘address’,
widt
最低0.47元/天 解锁文章
扫一扫
393
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
