学习笔记jira项目6-渲染列表和下拉框

简介: 学习笔记jira项目6-渲染列表和下拉框
const SearchList = ({ lists, users }) =>
{
  return (
    <table>
      <thead>
        <tr>
          <th>项目</th>
          <th>负责人</th>
        </tr>
      </thead>
      <tbody>
        {
          lists.map(project =>
            <tr>
              <td>{project.name}</td>
              <td>{users.find(user => user.id === project.personId)?.name}</td>
            </tr>
          )
        }
      </tbody>
    </table>
  )
}
export default SearchList

渲染列表

const SearchPannel = ({ users, param, setParam }) =>
{
  return (
    <form>
      <div>
        <input type="text" value={param.name} onChange={evt => setParam({
          ...param,
          name: evt.target.value
        })} />
        <select value={param.personId} onChange={evt => setParam({
          ...param,
          personId: evt.target.value
        })}>
          <option value={''}>负责人</option>
          {
            users.map(user => <option key={user.id} value={user.id}>{user.name}</option>)
          }
        </select>
      </div>
    </form>
  )
}
export default SearchPannel
相关文章
|
算法 前端开发 容器
OA项目之左侧菜单&动态选项卡(一)
OA项目之左侧菜单&动态选项卡
|
JavaScript
【Vue3从零开始-实战】S16:详情页样式优化及tab栏内容联动功能实现
【Vue3从零开始-实战】S16:详情页样式优化及tab栏内容联动功能实现
301 0
【Vue3从零开始-实战】S16:详情页样式优化及tab栏内容联动功能实现
|
7月前
|
开发工具 git
大事件项目12--侧边栏导航的组件标签准备
大事件项目12--侧边栏导航的组件标签准备
会议OA项目-其它页面->自定义组件应用,其它界面的布局
会议OA项目-其它页面->自定义组件应用,其它界面的布局
47 0
|
数据处理 网络架构
ElementUI - 主页面--动态树&右侧内容管理
ElementUI - 主页面--动态树&右侧内容管理
93 0
|
前端开发 数据库 容器
ivx页面(4)下拉菜单的页面
ivx页面(4)下拉菜单的页面
109 0
Ant Design Pro:项目的标签页标题与左上角项目标题图标如何修改?
Ant Design Pro:项目的标签页标题与左上角项目标题图标如何修改?
330 0
|
开发工具 芯片 开发者
2.1工作空间及组件:组件界面操作演示|学习笔记
快速学习2.1工作空间及组件:组件界面操作演示
2.1工作空间及组件:组件界面操作演示|学习笔记

热门文章

最新文章