chore(table): split demo (#2761)

packages/nutui-taro-demo/src/exhibition/pages/table/align.vue

@@ -0,0 +1,40 @@
+<template>
+  <nut-table :columns="columns" :data="data"></nut-table>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const columns = ref([
+  {
+    title: '姓名',
+    key: 'name',
+    align: 'left'
+  },
+  {
+    title: '性别',
+    key: 'sex',
+    align: 'center'
+  },
+  {
+    title: '学历',
+    key: 'record',
+    align: 'right'
+  }
+]);
+const data = ref([
+  {
+    name: 'Tom',
+    sex: '男',
+    record: '小学'
+  },
+  {
+    name: 'Lucy',
+    sex: '女',
+    record: '本科'
+  },
+  {
+    name: 'Jack',
+    sex: '男',
+    record: '高中'
+  }
+]);
+</script>

packages/nutui-taro-demo/src/exhibition/pages/table/async.vue

@@ -0,0 +1,59 @@
+<template>
+  <nut-table :columns="columns" :data="data">
+    <template #nodata>Loading...</template>
+  </nut-table>
+</template>
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+const columns = ref([
+  {
+    title: '姓名',
+    key: 'name'
+  },
+  {
+    title: '性别',
+    key: 'sex'
+  },
+  {
+    title: '学历',
+    key: 'record'
+  },
+  {
+    title: '年龄',
+    key: 'age'
+  },
+  {
+    title: '地址',
+    key: 'address'
+  }
+]);
+
+const data = ref<Array<any>>([]);
+onMounted(() => {
+  setTimeout(() => {
+    data.value = [
+      {
+        address: '北京',
+        name: 'Tom',
+        sex: '男',
+        record: '小学',
+        age: 13
+      },
+      {
+        record: '本科',
+        name: 'Lucy',
+        sex: '女',
+        age: 34,
+        address: '上海'
+      },
+      {
+        name: 'Jack',
+        sex: '男',
+        record: '高中',
+        age: 4,
+        address: '杭州'
+      }
+    ];
+  }, 5000);
+});
+</script>

packages/nutui-taro-demo/src/exhibition/pages/table/basic.vue

@@ -0,0 +1,37 @@
+<template>
+  <nut-table :columns="columns" :data="data"></nut-table>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const columns = ref([
+  {
+    title: '姓名',
+    key: 'name'
+  },
+  {
+    title: '性别',
+    key: 'sex'
+  },
+  {
+    title: '学历',
+    key: 'record'
+  }
+]);
+const data = ref([
+  {
+    name: 'Tom',
+    sex: '男',
+    record: '小学'
+  },
+  {
+    name: 'Lucy',
+    sex: '女',
+    record: '本科'
+  },
+  {
+    name: 'Jack',
+    sex: '男',
+    record: '高中'
+  }
+]);
+</script>

packages/nutui-taro-demo/src/exhibition/pages/table/border.vue

@@ -0,0 +1,37 @@
+<template>
+  <nut-table :columns="columns" :data="data" :bordered="false"></nut-table>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const columns = ref([
+  {
+    title: '姓名',
+    key: 'name'
+  },
+  {
+    title: '性别',
+    key: 'sex'
+  },
+  {
+    title: '学历',
+    key: 'record'
+  }
+]);
+const data = ref([
+  {
+    name: 'Tom',
+    sex: '男',
+    record: '小学'
+  },
+  {
+    name: 'Lucy',
+    sex: '女',
+    record: '本科'
+  },
+  {
+    name: 'Jack',
+    sex: '男',
+    record: '高中'
+  }
+]);
+</script>

packages/nutui-taro-demo/src/exhibition/pages/table/custom.vue

@@ -0,0 +1,68 @@
+<template>
+  <nut-table :columns="columns" :data="data"></nut-table>
+</template>
+<script setup lang="ts">
+import { ref, h } from 'vue';
+import { Dongdong } from '@nutui/icons-vue-taro';
+const columns = ref([
+  {
+    title: '姓名',
+    key: 'name'
+  },
+  {
+    title: '性别',
+    key: 'sex'
+  },
+  {
+    title: '学历',
+    key: 'record'
+  },
+  {
+    title: '操作',
+    key: 'render'
+  }
+]);
+
+const data = ref([
+  {
+    name: 'Tom',
+    sex: '男',
+    record: '小学',
+    render: () => {
+      return h(
+        'button',
+        {
+          onClick: () => {
+            console.log('hello');
+          }
+        },
+        'Hello'
+      );
+    }
+  },
+  {
+    name: 'Lucy',
+    sex: '女',
+    record: '本科',
+    render: () => {
+      return h(Dongdong, { width: '14px', height: '14px ' });
+    }
+  },
+  {
+    name: 'Jack',
+    sex: '男',
+    record: '高中',
+    render: () => {
+      return h(
+        'button',
+        {
+          onClick: () => {
+            window.open('https://www.jd.com');
+          }
+        },
+        '打开京东'
+      );
+    }
+  }
+]);
+</script>