nutui-uniapp

Appearance

Table 表格 ​

介绍 ​

用于展示基础表格

基础用法 ​

html
<template>
  <nut-table :columns="columns" :data="data"></nut-table>
</template>
<script lang="ts">
  import { reactive, toRefs, h } from 'vue';
  export default {
    props: {},
    setup() {
      const state = reactive({
        columns: [
          {
            title: '姓名',
            key: 'name',
            stylehead: 'font-size:20px;color:red;font-weight:bolder;',
            stylecolumn: 'font-size:10px;color:blue;'
          },
          {
            title: '性别',
            key: 'sex',
            render: (record) => {
              return h(
                'span',
                {
                  style: {
                    color: record.sex === '女' ? 'blue' : 'green'
                  }
                },
                record.sex
              );
            }
          },
          {
            title: '学历',
            key: 'record'
          }
        ],
        data: [
          {
            name: 'Tom',
            sex: '男',
            record: '小学'
          },
          {
            name: 'Lucy',
            sex: '女',
            record: '本科'
          },
          {
            name: 'Jack',
            sex: '男',
            record: '高中'
          }
        ]
      });
      return {
        ...toRefs(state)
      };
    }
  };
</script>

是否显示边框，文字对齐 ​

html
<template>
  <nut-table :columns="columns" :data="data" :bordered="bordered"></nut-table>
</template>
<script lang="ts">
  import { reactive, toRefs } from 'vue';
  export default {
    props: {},
    setup() {
      const state = reactive({
        bordered: false,
        columns: [
          {
            title: '姓名',
            key: 'name',
            align: 'center'
          },
          {
            title: '性别',
            key: 'sex'
          },
          {
            title: '学历',
            key: 'record'
          }
        ],
        data: [
          {
            name: 'Tom',
            sex: '男',
            record: '小学'
          },
          {
            name: 'Lucy',
            sex: '女',
            record: '本科'
          },
          {
            name: 'Jack',
            sex: '男',
            record: '高中'
          }
        ]
      });
      return {
        ...toRefs(state)
      };
    }
  };
</script>

显示总结栏 ​

html
<template>
  <nut-table :columns="columns" :data="data" :summary="summary"></nut-table>
</template>
<script lang="ts">
  import { reactive, toRefs } from 'vue';
  export default {
    props: {},
    setup() {
      const state = reactive({
        columns: [
          {
            title: '姓名',
            key: 'name'
          },
          {
            title: '性别',
            key: 'sex'
          },
          {
            title: '学历',
            key: 'record'
          },
          {
            title: '年龄',
            key: 'age'
          },
          {
            title: '地址',
            key: 'address'
          }
        ],
        data: [
          {
            name: 'Tom',
            sex: '男',
            record: '小学',
            age: 13,
            address: '北京'
          },
          {
            name: 'Lucy',
            sex: '女',
            record: '本科',
            age: 34,
            address: '上海'
          },
          {
            name: 'Jack',
            sex: '男',
            record: '高中',
            age: 4,
            address: '杭州'
          }
        ],
        summary: () => {
          return {
            value: '这是总结栏',
            colspan: 5
          };
        }
      });
      return {
        ...toRefs(state)
      };
    }
  };
</script>

条纹、明暗交替 ​

html
<template>
  <nut-table :columns="columns3" :data="data2" :striped="striped"></nut-table>
</template>
<script lang="ts">
  import { reactive, toRefs } from 'vue';
  export default {
    props: {},
    setup() {
      const state = reactive({
        striped: true,
        columns3: [
          {
            title: '姓名',
            key: 'name'
          },
          {
            title: '性别',
            key: 'sex'
          },
          {
            title: '学历',
            key: 'record'
          },
          {
            title: '年龄',
            key: 'age'
          },
          {
            title: '地址',
            key: 'address'
          }
        ],
        data2: [
          {
            name: 'Tom',
            sex: '男',
            record: '小学',
            age: 13,
            address: '北京'
          },
          {
            name: 'Lucy',
            sex: '女',
            record: '本科',
            age: 34,
            address: '上海'
          },
          {
            name: 'Jack',
            sex: '男',
            record: '高中',
            age: 4,
            address: '杭州'
          }
        ]
      });
      return {
        ...toRefs(state)
      };
    }
  };
</script>

无数据默认展示，支持自定义 ​

html
<template>
  <nut-table :columns="columns" :data="data"></nut-table>
  <nut-table :columns="columns3" :data="data3">
    <template #nodata>
      <div class="no-data"> 这里是自定义展示 </div>
    </template>
  </nut-table>
</template>
<script lang="ts">
  import { reactive, toRefs } from 'vue';
  export default {
    setup() {
      const state = reactive({
        columns: [
          {
            title: '姓名',
            key: 'name'
          },
          {
            title: '性别',
            key: 'sex'
          },
          {
            title: '学历',
            key: 'record'
          },
          {
            title: '年龄',
            key: 'age'
          },
          {
            title: '地址',
            key: 'address'
          }
        ],
        data: [],
        columns3: [
          {
            title: '姓名',
            key: 'name'
          },
          {
            title: '性别',
            key: 'sex'
          },
          {
            title: '学历',
            key: 'record'
          },
          {
            title: '年龄',
            key: 'age'
          },
          {
            title: '地址',
            key: 'address'
          }
        ],
        data3: []
      });
      return {
        ...toRefs(state)
      };
    }
  };
</script>

自定义单元格 不支持小程序 ​

html
<template>
  <nut-table :columns="columns" :data="data"></nut-table>
</template>
<script lang="ts">
  import { reactive, toRefs, h } from 'vue';
  import NutButton from 'nutui-uniapp/components/button/button.vue'、
  import NutIcon from 'nutui-uniapp/components/icon/icon.vue'

  export default {
    setup() {
      const state = reactive({
        columns: [
          {
            title: '姓名',
            key: 'name',
            align: 'center'
          },
          {
            title: '性别',
            key: 'sex'
          },
          {
            title: '学历',
            key: 'record'
          },
          {
            title: '操作',
            key: 'render'
          }
        ],
        data: [
        {
          name: 'Tom',
          sex: '男',
          record: '小学',
          render: () => {
            return h(NutButton, { size: 'small', type: 'primary' }, () => 'Hello')
          },
        },
        {
          name: 'Lucy',
          sex: '女',
          record: '本科',
          render: () => {
            return h(NutIcon, { size: '14px', name: 'dongdong' })
          },
        },
        {
          name: 'Jack',
          sex: '男',
          record: '高中',
          render: () => {
            return h(NutButton, { type: 'success', size: 'small' }, () => '编辑按钮')
          },
        },
      ],
      });
      return {
        ...toRefs(state)
      };
    }
  };
</script>

支持异步渲染 ​

html
<template>
  <h2>支持异步渲染(5s之后看效果)</h2>
  <nut-table :columns="columns" :data="data"></nut-table>
</template>
<script lang="ts">
  import { reactive, toRefs, onMounted } from 'vue';
  export default {
    props: {},
    setup() {
      const state = reactive({
        columns: [
          {
            title: '姓名',
            key: 'name'
          },
          {
            title: '性别',
            key: 'sex'
          },
          {
            title: '学历',
            key: 'record'
          },
          {
            title: '年龄',
            key: 'age'
          },
          {
            title: '地址',
            key: 'address'
          }
        ],
        data: [],
        data1: [
          {
            address: '北京',
            name: 'Tom',
            sex: '男',
            record: '小学',
            age: 13
          },
          {
            record: '本科',
            name: 'Lucy',
            sex: '女',
            age: 34,
            address: '上海'
          },
          {
            name: 'Jack',
            sex: '男',
            record: '高中',
            age: 4,
            address: '杭州'
          }
        ]
      });
      onMounted(() => {
        setTimeout(() => {
          state.data = state.data1.slice();
        }, 5000);
      });
      return {
        ...toRefs(state)
      };
    }
  };
</script>

支持排序 ​

html
<template>
  <nut-table :columns="columns" :data="data" @sorter="handleSorter"></nut-table>
</template>
<script lang="ts">
  import { reactive, toRefs } from 'vue';
  export default {
    setup() {
      const state = reactive({
        columns: [
          {
            title: '姓名',
            key: 'name',
            align: 'center',
            sorter: true
          },
          {
            title: '性别',
            key: 'sex'
          },
          {
            title: '学历',
            key: 'record'
          },
          {
            title: '年龄',
            key: 'age',
            sorter: (row1: any, row2: any) => {
              return row1.age - row2.age;
            }
          }
        ],
        data: [
          {
            name: 'Tom',
            sex: '男',
            record: '小学',
            age: 10
          },
          {
            name: 'Lucy',
            sex: '女',
            record: '本科',
            age: 30
          },
          {
            name: 'Jack',
            sex: '男',
            record: '高中',
            age: 4
          }
        ]
      });

      const handleSorter = (item: TableColumnProps) => {
        console.log(`${JSON.stringify(item)}`);
      };

      return {
        ...toRefs(state),
        handleSorter
      };
    }
  };
</script>

API ​

Props ​

参数说明类型默认值
bordered是否显示边框booleantrue
columns表头数据TableColumnProps[][]
data表格数据object[][]
summary是否显示简介Function-
striped条纹是否明暗交替booleanfalse

TableColumnProps ​

参数说明类型默认值
key列的唯一标识string``
title表头标题string``
stylehead表头样式string``
stylecolumn列样式string``
align列的对齐方式，可选值left,center,rightstringleft
sorter排序，可选值有 true,function, default, 其中 default表示点击之后可能会依赖接口, function可以返回具体的排序函数, default表示采用默认的排序算法boolean | Function | string-
render自定义渲染列数据，优先级高Function(record)-

Events ​

事件名说明回调参数
sorter点击排序按钮触发item: 当前点击的表头的数据

主题定制 ​

样式变量 ​

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

名称默认值
--nut-table-border-color#ececec
--nut-table-cols-padding10px
--nut-table-tr-even-bg-color#f3f3f3
--nut-table-tr-odd-bg-colorvar(--nut-white)

MIT Licensed

版权所有 © 2023 年-至今 yang1206 贡献者