table 二次封装

在中后台业务的系统中，表格是最常用的组件之一。为了提高开发效率和代码复用性，我们可以对表格组件进行二次封装，以满足具体业务需求。在二次封装的表格组件中，通常包含以下几个功能点：

1. 搜索条件：可以在表格上方添加搜索条件，用于筛选表格数据。
2. 表格展示：通过表格展示数据，并支持排序、分页等功能。
3. 表格操作列：在表格中添加操作列，用于进行编辑、删除等操作。
4. 分页：提供分页功能，方便用户浏览大量数据。

一个具体的二次封装的表格组件的例子可以参考以下代码：

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column v-for="item in tableColumn" :key="item.prop" :prop="item.prop" :label="item.label"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'yxtTable',
  props: {
    apiUrl: {
      // 列表接口（必填）
      type: Function,
      required: true
    },
    tableColumn: {
      // 自定义列配置
      type: Array,
      default: () => []
    },
    otherConfig: {
      type: Object,
      default: () => {
        return {
          list: 'list'
        }
      }
    }
  },
  data () {
    return {
      tableData: []
    }
  },
  created () {
    this.getData()
  },
  methods: {
    getData () {
      const fun = this.apiUrl
      fun().then(res => {
        this.tableData = res[this.otherConfig.list || []
      })
    }
  }
}
</script>

以上代码是一个基于Ant Design UI组件库进行二次封装的表格组件的示例。通过传入不同的参数，可以实现不同的表格展示效果。可以根据具体业务需求进行修改和扩展。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [二次封装 el-table](https://blog.csdn.net/yerongtao/article/details/126998230)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *3* [antd Design Table二次封装](https://download.csdn.net/download/qq_38734862/12365204)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]