标签：const record ant item specialappointmentA design key import table
import React, { useEffect, useState } from 'react'; import { SetData } from './../../data.d'; import type { ProColumns } from '@ant-design/pro-table'; import { EditableProTable } from '@ant-design/pro-table'; import { Space } from 'antd' import { StarOutlined } from '_@ant-design_icons@4.6.4@@ant-design/icons'; // import { Button } from 'antd'; import styles from '../CommercialInsurance/style.less' interface Model{ specialappointmentA: SetData[], specialClick: (value: SetData[]) => void }export const Appointment = (props: Model) => {
let { specialappointmentA, specialClick } = props; console.log(specialappointmentA, 'specialappointmentAspecialappointmentA'); const [showStar, setShowStar] = useState(false) // 默认选择的时候增加星星 const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([]); const [dataSource, setDataSource] = useState<SetData[]>(specialappointmentA); const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]) // const columns: ProColumns<SetData>[] = [ { title: '序列号', dataIndex: 'specId', key: 'specId', formItemProps: (form, { rowIndex }) => { // 设置哪列能编辑 return { rules: rowIndex > 2 ? [{ required: true, message: '此项为必填项' }] : [], }; }, // 第二行不允许编辑 editable: (text, record, index) => { return false // 控制哪行能编写 控制所有序列号都不能更改 }, width: '30%', }, { title: '特约内容', key: 'content', dataIndex: 'content', }, { title: '操作', valueType: 'option', width: 200, render: (text, record, _, action) => [ record.isModify == 2? <div key='1'> // 根据数据返回 判断 哪行能编辑 增加动态操作按钮 <Space> <a key="editable" onClick={() => { console.log(text, record, 'action'); action?.startEditable?.(record.key); }} > 编辑 </a> <a key="delete" onClick={() => { setDataSource(dataSource.filter((item) => item.key !== record.key)); }} > 删除 </a> </Space> </div> : <div key='2'></div> ], }, ] useEffect(() => { let key:React.Key[] = [] specialappointmentA.map(item => { if (item.useFlag == '1') { key.push(item.key) } }) setSelectedRowKeys(key) // 当页面初始化的时候 遍历传入数据的数组 判断当useFlag 为1 的时候 把 值为1的选项默认选择 }, []) const rowSelection = { selectedRowKeys: selectedRowKeys, onChange: (selectedRowKeys: React.Key[], selectedRows: SetData[]) => { setSelectedRowKeys(selectedRowKeys) }, getCheckboxProps: (record: SetData) => ({ disabled: record.useFlag == '1' , // name: record.name, }), };
return ( <> <EditableProTable<SetData> rowSelection={{ ...rowSelection, }} rowClassName={(record, index) => { console.log(record, index); if (record.useFlag == '1') { return styles.inputStar } }} // style={{minHeight: '250px'}} headerTitle="" // className={styles.inputStar} columns={columns} rowKey="key" controlled={true} value={dataSource} recordCreatorProps={false} // 关闭新建 tableAlertRender={false} onChange={setDataSource} editable={{ type: 'multiple', editableKeys, onSave: async (rowKey, data, row) => { specialappointmentA.forEach(item => { if (item.key == rowKey) { item = data let message = [] message.push(item) specialClick(message) } }) }, onChange: setEditableRowKeys, }} /> </> ); };
export default Appointment;
标签：const,record,ant,item,specialappointmentA,design,key,import,table 来源： https://www.cnblogs.com/hekeying/p/15347026.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。