FyUseTable 表格组件

基于 ElementUI Table 和 Pagination 的表格组件封装，支持列配置、分页、选择等功能。

安装

npm install fy-vue2-use-table

基本用法

import FyUseTable from 'fy-vue2-use-table';

export default {
  components: {
    FyUseTable
  }
}

<template>
  <fy-use-table
    :data="tableData"
    :columns="columns"
    :pagination="pagination"
    @pagination-change="handlePaginationChange"
  />
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 25, address: '北京市' },
        { name: '李四', age: 30, address: '上海市' }
      ],
      columns: [
        { prop: 'name', label: '姓名', minWidth: '100px' },
        { prop: 'age', label: '年龄', width: '80px' },
        { prop: 'address', label: '地址', minWidth: '150px' }
      ],
      pagination: {
        page: 1,
        size: 10,
        total: 100
      }
    };
  },
  methods: {
    handlePaginationChange(pagination) {
      console.log(pagination);
      // { page: 1, size: 10, total: 100 }
    }
  }
};
</script>

显示序号

<fy-use-table
  :data="tableData"
  :columns="columns"
  show-index
/>

显示选择框

<fy-use-table
  :data="tableData"
  :columns="columns"
  show-selection
  @selection-change="handleSelectionChange"
/>

隐藏分页

<fy-use-table
  :data="tableData"
  :columns="columns"
  :show-pagination="false"
/>

自定义列内容

通过 slot 可以自定义列的渲染内容：

<fy-use-table :data="tableData" :columns="columns">
  <template #action="{ row }">
    <el-button size="mini" @click="handleEdit(row)">编辑</el-button>
    <el-button size="mini" type="danger" @click="handleDelete(row)">删除</el-button>
  </template>
</fy-use-table>

columns: [
  { prop: 'name', label: '姓名' },
  { prop: 'action', label: '操作', slot: 'action' }
]

表格属性

| 参数 | 说明 | 类型 | 默认值 | |------|------|------|--------| | data | 表格数据 | Array | [] | | columns | 列配置数组 | Array | [] | | show-selection | 是否显示选择框 | Boolean | false | | show-index | 是否显示序号 | Boolean | false | | height | 表格高度 | String / Number | null | | max-height | 表格最大高度 | String / Number | null | | stripe | 是否显示斑马纹 | Boolean | false | | border | 是否显示边框 | Boolean | false | | size | 表格尺寸 | String | 'medium' | | show-header | 是否显示表头 | Boolean | true | | highlight-current-row | 是否高亮当前行 | Boolean | false | | show-pagination | 是否显示分页 | Boolean | true | | pagination | 分页配置 | Object | { page: 1, size: 10, total: 0 } | | page-sizes | 每页显示条数选项 | Array | [10, 20, 50, 100] | | pagination-layout | 分页布局 | String | 'total, sizes, prev, pager, next, jumper' |

列配置 (columns)

| 参数 | 说明 | 类型 | 默认值 | |------|------|------|--------| | prop | 字段名 | String | - | | label | 列标题 | String | - | | width | 列宽度 | String / Number | - | | min-width | 最小列宽度 | String / Number | - | | align | 对齐方式 | String | 'left' | | fixed | 固定列 | String / Boolean | - | | slot | 自定义插槽名称 | String | - |

事件

| 事件名 | 说明 | 回调参数 | |--------|------|----------| | selection-change | 选择项发生变化时触发 | selection | | current-change | 当前行变化时触发 | currentRow | | row-click | 行点击时触发 | row | | pagination-change | 分页参数变化时触发 | pagination | | page-size-change | 每页条数变化时触发 | size | | page-change | 页码变化时触发 | page | | refresh | 刷新数据时触发 | - |

方法

通过 ref 调用：

<fy-use-table ref="table" ... />

this.$refs.table.refresh();      // 刷新数据
this.$refs.table.clearSelection(); // 清空选择
this.$refs.table.setCurrentRow(row); // 设置当前行

| 方法名 | 说明 | 参数 | |--------|------|------| | refresh | 触发刷新事件 | - | | clearSelection | 清空选择 | - | | setCurrentRow | 设置当前行 | row |

依赖

• vue: ^2.6.14
• element-ui: ^2.15.13