Leanote's Blog

1. https://app.cloudcone.com/

import { v4 as uuidv4 } from 'uuid'
  const { request: updateEnabledRequest, loading: updateSortLoading } = useRequest(switchApi)
  /**
   * 修改开关状态
   */
  const handleChangeEnabled = debounce(async (record: Record<string, unknown>) => {
    try {
      const params = {
        id: record?.id,
        enabled: !record?.enabled,
      }
      await updateEnabledRequest({ method: 'put', params })
      message.success('修改成功')
    } catch {
      const newTableData = [...(tableRef?.current?.data?.list ?? [])].map((item) => {
        if (item?.id === record?.id) {
          return { ...item, rowKey: uuidv4() }
        }
        return item
      })
      tableRef.current?.mutate({ list: newTableData, total: tableRef?.current?.data?.total })
    }
  }, 10)
  const columns = [
    {
        title: '状态',
        dataIndex: 'enabled',
        width: 80,
        render: (text, record) => {
          // 按钮权限判断
          if (!validatePermission('commodityCenter_lis

1. 使用 Form.List 动态控制 Table 数据 (最推荐的方式，尤其是编辑型表格)

思路
- 用 Form.List 来存储一组列表数据（比如表格的每一行）；
- 每一行的数据作为一个对象；
- Table 的数据源（dataSource）直接绑定到 form.getFieldValue('listName')；
- 每列通过 Form.Item 渲染可编辑单元格。

示例

import React from 'react';
import { Form, Input, InputNumber, Button, Table } from 'antd';
const EditableTable = () => {
  const [form] = Form.useForm();
  return (
    <Form form={form} initialValues={{ users: [{ name: '张三', age: 18 }] }}>
      <Form.List name="users">
        {(fields, { add, remove }) => {
          const columns = [
            {
              title: '姓名',
              dataIndex: 'name',
              render: (_, __, index) => (
                <Form.Item name={[index, 'name']} style={{ marginBottom: 0 }}>
                  <Input />
                </Form.Item>
              ),
            },
            {
              title: '年龄',
              dataIndex: 'age',
              render: (_, __, index) => (
                <F

https://stackoverflow.com/questions/71084718/docker-desktop-stopped-message-after-installation
1. 只需转到配置文件 C:\Users\<username>\AppData\Roaming\Docker\settings.json，然后设置"wslEngineEnabled": true
2. 重启电脑

该错误主要由于其 Windows Defender 实时保护功能。请按照更改 Windows Defender 计划的步骤进行修复。

1. 按Windows键+R。这样会打开“运行”。或者，你可以前往“开始”菜单，然后搜索 “运行”。

2. 在运行对话框中，输入taskschd.msc并按回车键。

3. 导航到 任务 计划程序 库> Microsoft > Windows > Windows Defender。

4. 在右侧窗格中，双击“Windows Defender 计划扫描”。

5. 在常规选项卡上，取消选中以最高权限运行选项。

6. 单击“条件”选项卡并取消选中所有选项。

7. 单击“确定”。

除了直接在渲染逻辑中使用 form.getFieldValue 和 useWatch 之外，Ant Design Form 还提供了shouldUpdate属性在 Form.Item 组件上，这是另一种实现表单项之间联动的方式。shouldUpdate 允许你根据其他字段的变化来重新渲染 Form.Item，而不需要直接操作表单状态或使用额外的状态管理。这种方法更适合于当你需要根据一个或多个表单项的值变化来改变当前表单项的行为时使用。

使用 shouldUpdate 实现表单项联动
下面是一个使用shouldUpdate 的例子，它展示了如何根据一个单选按钮的选择来显示一个额外的输入框：

import React from 'react';
import { Form, Input, Radio, Button } from 'antd';
const FormItemDependencyWithShouldUpdate = () => {
  return (
    <Form layout="vertical">
      <Form.Item name="choice" label="选择">
        <Radio.Group>
          <Radio value="option1">选项1</Radio>
          <Radio value="option2">选项2</Radio>
        </Radio.Group>
      </Form.Item>
      {/* 使用shouldUpdate监听choice字段的变化 */}
      <Form.Item shouldUpdate={(prevValues, currentValues) => prevValues.choice !== currentValues.choice}>
        {({ getFieldValue }) => {
          return getFieldValue('choice') === 'option2' ? (
            <Form.Item
              name="inpu

原因

使用了 listType="picture-card" 后, 删除/上传图片父元素 .ant-upload-list-picture-card 下面会同时存在两个元素, 一个为上传触发元素, 另一个为显示图片的元素

解决

父元素设置 overflow: hidden 来隐藏多余的元素

.ant-upload-list-picture-card {
  overflow: hidden;
  height: 300px; // 自行设置合适的高度
  .ant-upload-select, .ant-upload-list-item-container {
    width: 100% !important;
    height: 100% !important;
  }
}

组件

// ElevatorScroll.vue
<template>
  <div
    class="elevator-container"
    @touchstart="handleTouchStart"
    @touchmove="handleTouchMove"
    @touchend="handleTouchEnd"
    ref="elevatorContainerRef"
  >
    <div
      class="section"
      v-for="(item, index) in items"
      :key="item.id"
      :ref="`section-${index}`"
    >
      <slot :item="item.list" :index="index"></slot>
    </div>
    <div v-if="showHint && consistentDirection" :class="['scroll-hint', hintPosition]"
         :style="{ opacity: hintOpacity }">{{ hintMessage }}
    </div>
  </div>
</template>
<script>
export default {
  props: {
    items: {
      type: Array,
      required: true,
    },
    activeSectionDate: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      startY: 0,
      currentY: 0,
      hasMoved: false, // 用于记录是否发生了有效滑动
      hintOpacity: 0,
      showHint: false,
      hintMessage: '',
      hintPosition: 'hint-bottom',
      initialDirection: n

组件

// CurrentWeekMenu.vue
<template>
  <div class="CurrentWeekMenu_root">
    <div class="week_box">
      <div v-for="(item, index) in weekList" :key="item.id" class="week-item_box"
           :class="activeSectionDate === index ? 'active' : ''" @click="scrollToSection(index)">
        <div class="week-item_name">{{ item.name }}</div>
        <div class="week-item_date">{{ item.date }}</div>
      </div>
    </div>
    <div class="food-menu_box" ref="foodMenuBoxRef">
      <div class="food-menu-group_box" v-for="(weekItem, weekIndex) in thisWeek" :key="weekIndex"
           :id="'food-menu-group_' + weekIndex">
        <div class="food-menu-item_box" v-for="item in weekItem" :key="item.id" :id="item.id"
             @click="checked = !checked">
          <div class="food-menu-item_img">
            <van-image
              width="2.13333rem"
              height="1.52rem"
              fit="cover"
              :src="item.imgUrl"
            >

const ForwardTable = React.forwardRef(InternalTable) as <RecordType extends object = any>(
  props: React.PropsWithChildren<TableProps<RecordType>> & { ref?: React.Ref<HTMLDivElement> },
) => React.ReactElement;
// so u can use
<Table<{id: string, b: number}>  />