vue3实战技巧 - 封装筛选、表格和请求逻辑

最新推荐文章于 2025-09-18 21:56:29 发布

原创最新推荐文章于 2025-09-18 21:56:29 发布 · 415 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html #javascript

vue相关同时被 2 个专栏收录

49 篇文章

订阅专栏

vue3实战技巧

4 篇文章

订阅专栏

文章展示了如何使用Vue的CompositionAPI来封装一个表格组件，包括数据请求和筛选功能。FilterExample01组件利用useList函数获取数据，并结合tableMeta定义表格结构。Table组件接受tableMeta和data作为props，渲染表格头和主体，而THead和TBody分别处理表头和数据行的展示。

封装表格筛选组件的请求部分

\src\examples\table.module.scss

\src\examples\FilterExample.tsx

封装表格筛选组件的请求部分

目标：封装composition API为表格筛选、请求提供能力
Coding

\src\examples\table.module.scss

.table {
  border-collapse: collapse;
  tr {
    td {
      border : 1px solid #717174;
      padding : 5px 10px;
    }
  }
}

\src\examples\FilterExample.tsx

import { defineComponent, ref } from "vue";
import classes from "./table.module.scss";
type TableMeta = {
  title: string,
  key: string
}
function request() {
  return Promise.resolve([
    { name: "杨木", score: 97 },
    { name: "韩土", score: 98 },
    { name: "张水", score: 92 },
    { name: "王金", score: 68 },
    { name: "王火", score: 58 }
  ])
}
function useList() {
  const data = ref<any>(null)
  request().then(res => {
    data.value = res
  })
  return data
}
export const FilterExample01 = defineComponent({
  setup() {
    // table描述
    const tableMeta: TableMeta[] = [{
      title: "姓名",
      key: "name"
    }, {
      title: "分数",
      key: "score"
    }]
    const data = useList()
    return () => {
      return <div>
        <Table tableMeta={tableMeta} data={data.value} />
      </div>
    }
  }
})
type TableProps = {
  tableMeta: TableMeta[],
  data: Array<Record<string, any>>
}
const Table = ({
  tableMeta,
  data
}: TableProps) => {
  return (
    <table class={classes.table}>
      <THead tableMeta={tableMeta} />
      <TBody tableMeta={tableMeta} data={data} />
    </table>
  )
}
// Omit<TableProps, "data"> 从TableProps类型中去掉"data"
const THead = ({ tableMeta }: Omit<TableProps, "data">) => {
  return <tr>
    {tableMeta.map(item => {
      return <td key={item.key}>{item.title}</td>
    })}
  </tr>
}
const TBody = ({ tableMeta, data }: TableProps) => {
  return <>
    {data && data.map((item, i) => {
      return <tr key={i}>
        {tableMeta.map(meta => {
          return <td key={meta.key}>{item[meta.key]}</td>
        })}
      </tr>
    })}
  </>
}