我的技术写作成长之路-HZERO-前端经验(二)

表格相关

给表格赋值

通过接口请求数据，如：
const res = await new DataSet.axios.post(url,params)
//拿到数据之后
data.loadData(res || [])

拿到高级搜索参数

const params = dataSet.queryDataSet.toData()

拿到表格选中的数据

const selected = dataset.selected.map(val=>val.data)

表格必填校验

const validateCurrent = ()=>{
    return dataSet.current.validate()
}
const isOk = await validateCurrent()

表格单行必填校验

const isOk = await recorf.validate()

表格默认选中第一条数据

const dataSet = useDataSet(()=>({
    autoQuery:true,
    fields,
    transport:{
        read:(){
            return {
                url:'',
                method:'POST',
                transformResponse(data){
                const obj = JSON.parse(data)
                let newData = obj.map((val,ind)=>({...val,index:ind}))
                return newData
                }
            }
        }
    },
    record:{
        dynamicProps:{
            defaultSelected:(record)=>{
                //判断逻辑
                return record.get('index') == 0
            }
        }
    }
}),underfind)

表格数据过多时，不分页，滚动展示时

//index.logic.ts
const dataSet = useDataSet(()=>({
    autoQuery:true,
    fields,
    paging:false,  //设置为不分页
 }),underfind)
 
//index.tsx
<Table 
    dataSet={dataSet}
    style={{
    maxHeight={300}
    }}
    
></Table>

表格行编辑

//index.config.tsx
const columns = [
    {
        name:'',
        label:'',
        editor:(record)=>{
            //getState : 获取行内某个字段的状态
            return record.getState('add')
        }
    }
]
//index.tsx
const renderer = ({record})=>{
    let btns = [
        <div onClick={()=>{
            record.setState('add',true)
            }}>编辑</div>
    ]
    return btns
}
let newColumn = [
    ...columns,
    {
        header:'',
        align:'center',
        renderer: renderer
    }
]