现在市面的组件库，我们用的越发熟练，越发爆嗨，只需cv就能完成需求，为何不爆嗨！！！

常用库有 element、antd、iView、antd pro，这些组件库都是在以往的需求开发当中进行总结提炼，一次次符合我们的需求，只要有文档，只要有示例，页面开发都是小问题，对吧，各位优秀开发前端工程师。

接下来，根据开发需求，一步步完成一个组件的开发，当然可能自己的思路，并不是最好的，欢迎大家留言讨论，一起进步。

需求：

动态列表格,就是一个表格，存在默认列，但是支持我们操控，实现动态效果

实现效果

默认表格配置

默认列配置

动态列组件支持查询

动态列组件支持勾选

动态列组件支持清空

动态列组件支持一键全选

动态列组件支持一键清空

功能点划分

表格默认列和动态列组件默认选中项实现双向绑定
动态列组件增删改与表格实现双向绑定
动态列组件实现搜索
动态列组件实现单点控制添加与删除
动态列组件实现一键控制功能全选与清空
动态列组件实现恢复初始态

使用到组件（Antd 组件库哈）

Table
Pagination
Modal
Input
Button
Checkbox

动态列组件区域划分

头部标题
头部提示语
核心内容区
- 核心区域头部功能按钮
- 搜索区域
- 左边所有内容项
- 待选内容项

动态列组件最终可支持配置项

  open?: boolean // Modal状态
  setOpen?: React.Dispatch<React.SetStateAction<boolean>> // 控制Modal状态
  modalTitle?: string | React.ReactNode
  modalWidth?: number
  modalHeadContent?: React.ReactNode
  leftHeadContent?: React.ReactNode | string
  rightHeadContent?: React.ReactNode | string
  modalBodyStyle?: any
  searchPlaceholder?: string
  modalOk?: (val, isUseDefaultData?: boolean) => void // 第二个参数 内部数据处理支持
  enableSelectAll?: boolean // 是否开启全选功能
  selectData: SelectItem[] // 下拉框数据
  isOutEmitData?: boolean
  defaultSelectKeyList?: string[] // 默认选中的key（当前表格列）自定义数据（外部做逻辑处理）
  initSelectKey?: string[] // 初始表格选中的key 自定义数据（外部做逻辑处理）
  curColumns?: any[] // 当前表格列 内部做逻辑处理
  originColumns?: any[] // 原始表格列 内部做逻辑处理
  isDelHeadCol?: boolean // 删除头部columnKey 例如序号 只有内部处理数据时生效
  isDelTailCol?: boolean // 删除尾部columnKey 例如操作 只有内部处理数据时生效
  isDelHeadAndTail?: boolean // 删除头尾部columnKey 只有内部处理数据时生效

动态列组件布局

这里使用了Tailwind CSS
- www.tailwindcss.cn/docs/instal…

    <div>
        // 头部内容区
        <div>{modalHeadContent}</div> 
        // 以下维核心区
        <div className="content-box flex">
          <div className="content-left-box flex-1 flex flex-col">
              // 核心区-左边
            <div className="content-left-head flex">
                // 核心区-功能按钮 - 一键全选
              {enableSelectAll && (
                <div>
                  <Checkbox onChange={e => onCheckBoxChange([], e)} checked={checkAll} indeterminate={indeterminate}>
                    全选
                  </Checkbox>
                </div>
              )}
              <div className="right-head-content">{leftHeadContent || ''}</div>
            </div>
            <div className="content-left-main flex-1 flex flex-col">
                // 核心区-左搜索
              <div>{childSearchRender({ curData: leftSelectData })}</div>
                 // 核心区-左列表区域
              <div className="flex-1 left-select-box">{selectItemRender(leftSelectData)}</div>
            </div>
          </div>
           // 核心区-右边
          <div className="content-right-box flex-1 flex flex-col">
            <div className="content-right-head flex">
              <div className="flex-1 right-head-content">{rightHeadContent || ''}</div>
              // 核心区-功能按钮 - 一键清空
              <div className="content-right-head-clear" onClick={() => handleRightClearSelectData()}>
                清空
              </div>
            </div>
            <div className="content-right-main flex-1 flex flex-col">
                // 核心区-右搜索
              <div>{childSearchRender({ curData: rightSelectData }, true)}</div>
              // 核心区-右列表区域
              <div className="flex-1 right-select-box">{selectItemRender(rightSelectData, true)}</div>
            </div>
          </div>
        </div>
      </div>

动态列组件-列表渲染

const selectItemRender = (listArr = [], isRight = false) => {
    return (
      <div className="h-full overflow-y-auto">
        <Checkbox.Group onChange={onCheckChange} className="flex-col h-full flex" value={selectKey}>
            // 数据遍历形式
          {listArr?.map(({ label, value, disabled = false }) => (
            <div className="mt-2 flex w-full" key={value}>
              {!isRight && (
                <Checkbox value={value} className="flex w-full" disabled={disabled}>
                  <span className="flex-1 inline-block">{label}</span>
                </Checkbox>
              )}
                 // 判断是否是 右边列表区域 添加删除按钮
              {isRight && <span className="flex-1 display-box">{label}</span>}
              {isRight && (
                <div className="text-right display-box">
                  <Button type="text" className="text-right" onClick={() => deleteRightData(value)} size="small">
                    <DeleteOutlined className="icon-box" />
                  </Button>
                </div>
              )}
            </div>
          ))}
        </Checkbox.Group>
      </div>
    )
  }

动态列组件-搜索渲染

const childSearchRender = (childSearchProps: any, isRight = false) => {
    // eslint-disable-next-line react/prop-types
    const { curData } = childSearchProps
    return (
      <Search
        style={{ marginBottom: 8 }}
        placeholder={searchPlaceholder || '请输入'}
        onSearch={e => {
          onSearch(e, curData, isRight)
        }}
        allowClear
      />
    )
  }

动态列组件样式

.content-box {
    width: 100%;
    height: 550px;
    border: 1px solid #d9d9d9;
  }
  .content-left-box {
    border-right: 1px solid #d9d9d9;
  }
  .content-left-head {
    padding: 16px 20px;
    background: #f5f8fb;
    height: 48px;
    box-sizing: border-box;
  }
  .content-right-head {
    padding: 16px 20px;
    background: #f5f8fb;
    height: 48px;
    box-sizing: border-box;

    &-clear {
      color: #f38d29;
      cursor: pointer;
    }
  }
  .content-right-box {
  }
  .content-left-main {
    padding: 10px 20px 0 20px;
    height: calc(100% - 50px);
    box-sizing: border-box;
  }
  .content-right-main {
    padding: 10px 20px 0 20px;
    height: calc(100% - 50px);
    box-sizing: border-box;
  }
  .right-head-content {
    font-weight: 700;
    color: #151e29;
    font-size: 14px;
  }
  .modal-head-box {
    color: #151e29;
    font-size: 14px;
    height: 30px;
  }
  .icon-box {
    color: #f4513b;
  }
  .ant-checkbox-group {
    flex-wrap: nowrap;
  }
  .left-select-box {
    height: 440px;
    padding-bottom: 10px;
  }
  .right-select-box {
    height: 440px;
    padding-bottom: 10px;
  }
  .ant-checkbox-wrapper {
    align-items: center;
  }
  .display-box {
    height: 22px;
  }

功能点逐一拆解实现

点1：表格默认列和动态列组件默认选中项实现双向绑定

首先，先写一个表格啦，确定列，这个就不用代码展示了吧，CV大法
其次，把表格原始列注入动态列组件当中，再者注入当前表格列及当前能选择的所有项
当前能选择所有项内容参数示例

[
    { label: '项目编码', value: 'projectCode' },
    { label: '项目名称', value: 'projectName' },
    { label: '项目公司', value: 'company' },
    { label: '标段', value: 'lot' },
 ]

<DynamicColumnModal
      selectData={selectDataArr} // 当前能选择的所有项
      curColumns={columns} // 当前表格列
      originColumns={originColumns} // 表格原始列
          />

动态组件内部默认选中当前表格列
这里需要把表格列数据进行过滤映射成 string[]

   内部是通过checkbox.Grop 实现选中 我们只需要 通过一个状态去控制即可 `selectKey`
   <Checkbox.Group onChange={onCheckChange} className="flex-col h-full flex" value={selectKey}>
       ...
   </Checkbox.Group>

动态列组件单点控制增删改

增，删，改就是实现左右边列表的双向绑定
监听左边勾选事件 + 右边删除事件 + 一键清空事件
通过左右两边的状态控制数据即可
状态

  const [originSelectData, setOriginSelectData] = useState([]) // 下拉原始数据 搜索需要
  const [originRightSelectData, setOriginRightSelectData] = useState([])
  const [rightSelectData, setRightSelectData] = useState([])
  const [selectKey, setSelectKey] = useState([])
  const [transferObj, setTransferObj] = useState({})
  const [indeterminate, setIndeterminate] = useState(false)
  const [checkAll, setCheckAll] = useState(false)
  const [leftSelectData, setLeftSelectData] = useState([])
  const [defaultSelectKey, setDefaultSelectKey] = useState([])
  const [originSelectKey, setOriginSelectKey] = useState([])

const onCheckChange = checkedValues => {
    // 往右边追加数据
    const selectResArr = checkedValues?.map(val => transferObj[val])
    setSelectKey(checkedValues) // 我们选中的key (选项)
    setRightSelectData(selectResArr) // 右边列表数据
    setOriginRightSelectData(selectResArr) // 右边原数据（搜索时候需要）
  }

const deleteRightData = key => {
    const preRightData = rightSelectData
    const filterResKeyArr = preRightData?.filter(it => it.value !== key).map(it => it.value) // 数据处理 只要你不等于删除的key 保留
    const filterResItemArr = preRightData?.filter(it => it.value !== key)
    setRightSelectData(filterResItemArr) // 更新右边数据 即可刷新右边列表
    setOriginRightSelectData(filterResItemArr) // 更新右边数据
    setSelectKey(filterResKeyArr) // 更新选中的key 即可刷新左边选中项
  }

  const handleRightClearSelectData = () => {
      // 这就暴力了塞
    setSelectKey([])
    setRightSelectData([])
    setOriginRightSelectData([])
  }

动态列组件实现搜索

搜索，就是改变一下数据视觉上看起来有过滤的效果塞
刚才我们不是多存了一份数据源嘛
出来见见啦~

const onSearch = (val, curData, isRight = false) => {
    const searchKey = val
    // 这个是同时支持 左右两边
    // 做个判断
    if (!isRight) {
     // 在判断一下是否有搜索内容 因为也需要清空的啦
      if (searchKey) {
          // 有，我就过滤呗
        const searchResArr = curData?.filter(item => item.label.includes(searchKey))
        setLeftSelectData(searchResArr)
      }
      if (!searchKey) {
          // 没有 我就把原本数据还给你呗
        setLeftSelectData(originSelectData)
      }
    }
    // 右边 一样
    if (isRight) {
      if (searchKey) {
        const searchResArr = curData?.filter(item => item.label.includes(searchKey))
        setRightSelectData(searchResArr)
      }
      if (!searchKey) {
        setRightSelectData(originRightSelectData)
      }
    }
  }

动态列组件增删改与表格实现数据绑定

里面的数据处理好了直接再关闭的时候丢给外面嘛
把右边的内容（也就是选中的key）返回给表格
表格再自己构造

  const handleOk = (colVal, isUseDefaultCol) => {
      `colVal` : 选中的列key
      `isUseDefaultCol`：是否使用默认列
      // table column字段组装
    const normalColConstructor = (
      title,
      dataIndex,
      isSort = true,
      colWidth = 150,
      isEllipsis = false,
      render = null
    ) => {
      const renderObj = render ? { render } : {}
      return {
        title,
        dataIndex,
        sorter: isSort,
        width: colWidth,
        ellipsis: isEllipsis,
        key: dataIndex,
        ...renderObj,
      }
    }
    const statusRender = text => approvalStatusRender(text)
    const dateRender = (text, record) => <span>{dayjs(text).format('YYYY-MM-DD')}</span>
    const newColArr = []
    // 定制化处理 （其实还有2.0）
    colVal?.forEach(({ label, value }, index) => {
      let isSort = false
      let renderFn = null
      const isSubmissionAmount = value === 'submissionAmount'
      const isApprovalAmount = value === 'approvalAmount'
      const isReductionRate = value === 'reductionRate'
      const isInitiationTime = value === 'initiationTime'
      
      // 特定的业务场景 特殊状态渲染
      const isStatus = value === 'status'
      // 特定的业务场景 时间类型 加上排序
      if (isApprovalAmount || isInitiationTime || isReductionRate || isSubmissionAmount) {
        isSort = true
      }
      if (isStatus) {
        renderFn = statusRender
      }
      // 普通列 已就绪
      // 普通列 标题 拿label就ok
      newColArr.push(normalColConstructor(label, value, isSort, 100, true, renderFn))
    })

    // 最后在头部追加一个序号
    newColArr.unshift({
      title: '序号',
      dataIndex: 'orderCode',
      width: 45,
      render: (_: any, record: any, index) => tablePageSize * (tablePage - 1) + index + 1,
    })
    // 最后在尾部部追加一个操作
    newColArr.push({
      title: '操作',
      dataIndex: 'action',
      fixed: 'right',
      width: 50,
      render: (text, row: DataType) => (
        <div>
          <Button type="link" className="tableBtn" onClick={() => console.log('详情')}>
            详情
          </Button>
        </div>
      ),
    })

    if (colVal?.length) {
      if (isUseDefaultCol) {
        setColumns([...originColumns])
      } else {
        setColumns([...newColArr])
      }
    } else {
      setColumns([...originColumns])
    }
  }

// 解决表格存在子列 -- 先搞定数据结构 -- 在解决表格列内容填充 -- 无需捆绑
// 遍历拿到新增列数组 匹配上代表 需要子数组 进行转换
    // eslint-disable-next-line consistent-return
    colVal?.forEach(({ label, value }, index) => {
      // DesignHomeDynamicCol[value] 返回的值能匹配到 说明存在 嵌套列
      const validVal = DesignHomeDynamicClassify[DesignHomeDynamicCol[value]]
      const isHasChild = newColChildObj[validVal]
      const titleText = DesignHomeDynamicLabel[value]
      if (validVal) {
        // 如果已经有孩子 追加子列
        if (isHasChild) {
          newColChildObj[validVal] = [...isHasChild, normalColConstructor(titleText, value)]
        } else {
          // 则 新增
          newColChildObj[validVal] = [normalColConstructor(titleText, value)]
        }
      } else {
        // 普通列 已就绪
        // 普通列 标题 拿label就ok
        newColArr.push(normalColConstructor(label, value, false, 100, true))
      }
    })

动态列组件实现恢复初始态实现双向绑定

这个就更简单啦再点击确定的时候传一个 isUseDefaultData：true
只是这个isUseDefaultData 的逻辑判断问题
当动态列组件点击恢复默认列我们只需把当初传进来的原始列数据更新到 selectKey 状态即可

const handleDefaultCol = () => {
    // 这里是考虑到组件灵活性 数据可由自己处理好在传入
    if (isOutEmitData) {
        setSelectKey(initSelectKey) 
      } else {
      // 这里是使用 内部数据处理逻辑
        setSelectKey(originSelectKey) 
    }
}

const handleOk = () => { 
// 数据比对 是否使用默认校验
// originColumnMapSelectKey 源数据与传出去的数据 进行比对
const originRightMapKey = originRightSelectData?.map(it => it.value) 
// 采用 lodash isEqual 方法
const isSame = isEqual(originSelectKey, originRightMapKey) 
// 判断外部是否有传 确定事件 handleOk
if (modalOk) { 
modalOk(originRightSelectData, isSame) 
} 
setOpen(false) 
}

const handleOk = (colVal, isUseDefaultCol) => {
... 一堆代码
// 当用户清空以后 还是恢复表格默认状态
 if (colVal?.length) {
     // 恢复默认列
     if (isUseDefaultCol) {
         setColumns([...originColumns]) 
       } else {
           // 否则就拿新数据更新
         setColumns([...newColArr])
       }
 } else { 
 setColumns([...originColumns]) 
 }
 }

动态列组件实现一键控制功能全选与清空

这就是Vip版本的噻
但是也简单无非就是操作多选框无非多选框就三种态
未选半选全选
既然我们下面的逻辑已处理好这个其实也很快的锅
首先，就是下面数据变化的时候我们上面需要去感应
其次就是上面操作的时候下面也需要感应
最后双向数据绑定就能搞定没有那么神秘
一步一步来先分别把上下事件处理好

const onCheckBoxChange = (dataArr = [], e = null) => {
// 判断所有数据长度
const allLen = originSelectData?.length 
// 根据当前选中数据长度 判断是 多选框三种状态当中的哪一种
const checkLen = e ? selectKey?.length : dataArr?.length // 全选 
const isAllSelect = allLen === checkLen // 半选 
const isHalfSelect = allLen > checkLen 
// 然后再判断一下是点击一键全选事件 触发还是 点击下面选项的时候触发
// 点击一键全选 能拿到事件的 e.target 从而来判断
// 这里是操作下面按钮的时候 触发
if (!e) { 
// 如果没有选中
if (checkLen === 0) { 
// 恢复未选状态
setCheckAll(false)
setIndeterminate(false)
return ''
} 
if (isAllSelect) { 
// 如果是全选 改为全选态
setCheckAll(true)
setIndeterminate(false) 
}
if (isHalfSelect) {
// 半选态
setIndeterminate(true) // 这个控制 多选框的半选态
setCheckAll(false) 
}
}
// 这个就是用户操作 一键全选按钮触发
if (e) {
// 如果当前长度为0 那么应该更新为全选
if (checkLen === 0) { 
setCheckAll(true)
setIndeterminate(false)
setSelectKey(originSelectData?.map(it => it.value))
} 
// 如果已经全选 就取消全选
if (isAllSelect) { 
setCheckAll(false)
setIndeterminate(false)
setSelectKey([]) 
} 
// 如果是半选态 就全选
if (isHalfSelect) { 
setCheckAll(true)
setIndeterminate(false) 
setSelectKey(originSelectData?.map(it => it.value))
}
} 
}

const onCheckChange = checkedValues => {
// 往右边追加数据 
const selectResArr = checkedValues?.map(val => transferObj[val]) setSelectKey(checkedValues) 
setRightSelectData(selectResArr) 
setOriginRightSelectData(selectResArr) 
}

我们两个事件都处理好那么开始进行联动
意思就是我们拿什么去控制这两个机关核心是不是就是选中的选项啊
有两种解法，第二种可能有点绕
- 一、就是在下面每个选项改变的时候都去调一下上面一键全选事件；然后上面变化的时候也去调一下下面选项的事件（常规）缺点：容易漏一变多改
- 二、监听选项key的变化去触发开关避免我们第一种缺点（优解）同时解决了确保外面传进来的表格列使得下拉框选中这些项生效

// 这里通过 useEffect() 实现监听 确保外面传进来的 表格列 使得下拉框选中这些项 生效 
useEffect(() => { 
onCheckBoxChange(selectKey) 
onCheckChange(selectKey) 
// eslint-disable-next-line react-hooks/exhaustive-deps },
[selectKey]
)

结束

都看到这里了，不留点痕迹，是怕我发现么？

juejin.cn/post/726679…

自建”IT兵器库”，你值得一看！

需求：

实现效果

默认表格配置

默认列配置

动态列组件支持查询

动态列组件支持勾选

动态列组件支持清空

动态列组件支持一键全选

动态列组件支持一键清空

功能点划分

使用到组件（Antd 组件库哈）

动态列组件区域划分

动态列组件最终可支持配置项

动态列组件布局

动态列组件-列表渲染

动态列组件-搜索渲染

动态列组件样式

功能点逐一拆解实现

点1：表格默认列和动态列组件默认选中项实现双向绑定

动态列组件单点控制增删改

动态列组件实现搜索

动态列组件增删改与表格实现数据绑定

动态列组件实现恢复初始态实现双向绑定

动态列组件实现一键控制功能全选与清空

结束

下一篇

自建”IT兵器库”，你值得一看！

需求：

实现效果

默认表格配置

默认列配置

动态列组件支持查询

动态列组件支持勾选

动态列组件支持清空

动态列组件支持一键全选

动态列组件支持一键清空

功能点划分

使用到组件（Antd 组件库哈）

动态列组件区域划分

动态列组件最终可支持配置项

动态列组件布局

动态列组件-列表渲染

动态列组件-搜索渲染

动态列组件样式

功能点逐一拆解实现

点1：表格默认列和动态列组件默认选中项 实现双向绑定

动态列组件 单点控制 增删改

动态列组件 实现搜索

动态列组件 增删改与表格 实现数据绑定

动态列组件 实现恢复初始态 实现双向绑定

动态列组件 实现一键控制功能 全选与清空

结束

下一篇

点1：表格默认列和动态列组件默认选中项实现双向绑定

动态列组件单点控制增删改

动态列组件实现搜索

动态列组件增删改与表格实现数据绑定

动态列组件实现恢复初始态实现双向绑定

动态列组件实现一键控制功能全选与清空