iview 组件的 table二次封装

sunyin.liu

已于 2023-08-01 11:21:24 修改

阅读量486

点赞数 1

CC 4.0 BY-SA版权

分类专栏： iview 文章标签： view design java 前端

于 2023-08-01 11:17:54 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_42066070/article/details/132038045

iview 专栏收录该内容

26 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

本文档介绍了如何使用iview组件库封装一个名为darkTable的组件，详细解析了组件的各个属性，如tableColumns（表格列名）、tableData（渲染数据）、tableHeight（表格高度）、paginateTotal（总页数）、isLoading（加载状态）、tablePageData（分页配置）以及selectChange（多选事件）。同时，还涵盖了封装的子组件和全局调用的方法。

      <dark-table
        ref="table"
        :tableColumns="tableColumns"
        @selectChange="changeSelect"
        :tableData="tableData"
        :tableHeight="585"
        :paginateTotal="paginateTotal"
        :isloading="isLoading"
        v-model="tablePageData"
      />

封装成darkTable组件

一、调用组件的属性代表的意思

1.tableColumns代表的是表格名称

    tableColumns: [
        {
          type: "selection",
          width: 60,
          align: "center",
        },
        {
          title: "客户名称",
          key: "custName",
          width: "160",
          align: "center",
        },
        {
          title: "营销户号",
          key: "consNo",

了解本专栏