积累

1. 学会了一个CSS 分割

grid布局，并且每4个一行。 好方便

<div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>

 

2. Ant design Checkbox全选

需要Checkbox.Group 要求的 value 必须是一个由 value 值组成的“基础类型数组”（例如 string[] 或 number[]）

['111','222','333']  需要绑定的是一个基础类型数组，

options 可能是label,value这样的对象数组，实现全选功能时候，只取value

const onCheckAllChange: CheckboxProps['onChange'] = (e) => {

    const allValues = checkboxColumOptions.map((item) => item.value);

    setCheckedList(e.target.checked ? allValues : []);

  };

 

3. React - useEffect 重要问题

画面上有一个下拉选框，这个下拉列表里面的数据，是通过下面的checkbox勾选出来的。

const [checkedList, setCheckedList] = useState([])

 

const selectOptions = checkboxColumOptions

    .filter((item) => checkedList.includes(item.value))

    .map((item) => ({ value: item.value, label: item.label }));

最开始想法 ：

使用useEffect监听 checkedList, 如果发生了改变，就重新setOptions  

！！！但是这样滥用了useEffect， 因为每次checkList 发生变化setCheckedList时候，组件都会重新渲染一边，所以options一定拿到的是最新值，无需检测checkedList变化，就能拿到的是最新值。

题外话：

如果真想检测checkedList呢，react监测的是对象地址，这样怎么能触发变化呢

需要 set一个新地址

✅ 1. 触发单选的 onChange 改为解构新数组
const onChange = (list: any[]) => { setCheckedList([...list]); // 💡 用 [...list] 创造一个全新地址的数组，强行触发 useEffect };  
useEffect(() => { 
// 只要上面用了 [...list] 更新状态，这里现在绝对能触发了！ console.log('checkedList 变化了，useEffect 成功触发！当前值:', checkedList); 
const filterList = checkboxColumOptions.filter((item) => { // 
💡 重点：箭头函数用了 {}，里面必须写 return，否则 filter 拿不到布尔值！ 
return checkedList.includes(item.value); }); 
console.log('过滤后的新列表 filterList:', filterList); 
setOptionsList(filterList); 
}, [checkedList]);

 4. Ant Design Form表单
只要标记好 name路径
<Form.Item name={['data', record.key, dataIndex]}>  我的数据data:{ holidayrate:{'202610':100}}  // 标记好寻找的路径 form表单即可自动获取input的最新值

form表单包含了两个部分，一个是form表单形式，一个是table 那么初期值要怎么设定呢

最外层form 

<Form form={form} initialValues={unifiedInitialValues} component={false}>  // initialValues-> 初期值

// 设定初期值 

 

const unifiedInitialValues = useMemo(() => {

    const dataMap: Record<string, any> = {};

    monthlyTableData.forEach((row) => {

      dataMap[row.key] = row;

    });

    return {

      ...record, // 展开基本情報的初期值（这样 name={col.itemVar} 就能直接匹配到） record是列表页带过来的数据行

      data: dataMap, // 月次情報的初期值（供 Table 内的 name={['data', ...]} 匹配）

    };

  }, [record, monthlyTableData]);

 

第一个form  

<Form.Item name={col.itemVar} style={{ margin: 0 }}>   用col.itemVar匹配

第二个Table

export const EditableCell: React.FC<EditableCellProps> = ({ editing, dataIndex, record, children, ...restProps }) => {

  console.log('record', record);

  console.log('dataIndex', dataIndex);

  return (

    <td {...restProps}>

      {editing ? (

        <Form.Item name={['data', record.key, dataIndex]} style={{ margin: 0 }}>

          <Input />

        </Form.Item>

      ) : (

        // 如果不可编辑，直接渲染原有的文本

        children

      )}

    </td>

  );

};

 

5. Select 受控组件

select 下拉框选项，是下面checkbox 勾选的值。

当我勾选了 123，并选择了123后，如果取消了3，那么选择框里面也要把3 去掉。

 

React:

Select 需要为受控组件 -》 值由useState来决定

1. 绑定value, onChange事件

const [selectLeftValue, setSelectLeftValue] = useState<string[]>([]);

<Select

          style={{ width: '100%' }}

          placeholder="この列までを左側に固定"

          showSearch

          className="mb-2"

          options={selectOptions}

          mode="multiple"

          allowClear

          maxTagCount="responsive"

          value={selectLeftValue}  // value就是绑定的值，显示的值

          onChange={(value) => setSelectLeftValue(value)}  // 通过onChange事件 更新绑定过的value

        ></Select>

2. checkbox onchange事件，去更新select绑定的 value值，进行过滤

const onChange = (list: string[]) => {

    setCheckedList(list);

    setSelectLeftValue((prev) => prev.filter((item) => list.includes(item))); // 这个地方过滤，注意不能用checkedList, checkedList不是最新的，要直接用list

  };

 

Vue:

与React区别是，v-model直接能拿到选择的数据，不用set绑定

<el-checkbox-group v-model="checkedItems" @change="handleCheckboxChange">

<el-select v-model="selectedValues" multiple placeholder="请选择">

<el-option v-for="item in checkedItems" :key="item" :label="'选项 ' + item" :value="item" />

</el-select>

<script setup>

import { ref } from 'vue'

const checkedItems = ref([]) // Checkbox 勾选的数据

const selectedValues = ref([]) // Select 真正选中的数据 // 当 Checkbox 改变时触发

const handleCheckboxChange = (newCheckedList) => {

// 关键步骤：过滤掉 Select 中已经不存在于 Checkbox 里的值

selectedValues.value = selectedValues.value.filter(val => newCheckedList.includes(val) )

}

</script>