Table 表格

特性

1. 传入 columns 渲染表格列
2. 传入 data 渲染表格数据
3. 内置分页插件，通过传入 pagination 配置分页插件
4. 支持 el-table 所有属性和事件
5. 支持使用插槽配置表格项，通过 customRender 设置插槽名
6. 基于 vue2 版本封装，强依赖于 element-ui
7. 可在非 TS 环境下正常使用，但需自行构建 jsx 环境(参考 babel-plugin-transform-vue-jsx (opens new window))。

基本用法

通过 columns 设置列，通过 data 传入数据即可渲染表格

<template>
  <niuka-table :data="data" :columns="columns"></niuka-table>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
        },
      ],
      columns: [
        { label: '日期', prop: 'date' },
        { label: '姓名', prop: 'name' },
        { label: '地址', prop: 'address' },
      ],
    };
  },
};
</script>

隐藏源代码

展示分页

通过 pagination 配置分页，pagination 默认为 false

<template>
  <niuka-table
    :data="data"
    :columns="columns"
    :pagination="pagination"
  ></niuka-table>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
        },
      ],
      columns: [
        { label: '日期', prop: 'date' },
        { label: '姓名', prop: 'name' },
        { label: '地址', prop: 'address' },
      ],
      pagination: {
        currentPage: 1,
        pageSize: 10,
      },
    };
  },
};
</script>

隐藏源代码

支持 el-table 中的属性

组件支持了 el-table 中的所有属性

<template>
  <niuka-table :data="data" :columns="columns" border stripe></niuka-table>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
        },
      ],
      columns: [
        { label: '', prop: 'selection', type: 'selection' },
        { label: '序号', type: 'index', width: 50 },
        { label: '日期', prop: 'date' },
        { label: '姓名', prop: 'name' },
        { label: '地址', prop: 'address' },
      ],
    };
  },
};
</script>

隐藏源代码

自定义插槽

可通过 customRender 配置自定义插槽。插槽提供了多个参数：row 当前行的数据，column 当前列的配置，cellValue当前单元格的值等

<template>
  <niuka-table :data="data" :columns="columns">
    <template #operation="{ row }">
      <el-button>插槽</el-button>
    </template>
  </niuka-table>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
        },
      ],
      columns: [
        { label: '日期', prop: 'date' },
        { label: '姓名', prop: 'name' },
        { label: '地址', prop: 'address' },
        { label: '操作', prop: 'operation', customRender: 'operation' },
      ],
    };
  },
};
</script>

隐藏源代码

NiukaTable Attributes

NiukaTable Events

Column Attributes

Pagination Attributes