m8-framework-mcp 1.0.0

package/docs/m8mpdoc-develop/009-UI/347/273/204/344/273/266/078-table/350/241/250/346/240/274.md

@@ -0,0 +1,849 @@
+# 组件使用
+
+## Table 表格
+
+### 介绍
+
+-   表格组件
+
+::: ifdef M83
+
+-   该组件自`v8.3.23-beta.3`版本开始支持
+
+::: endif
+
+::: ifdef M84
+
+-   该组件自`v8.4.1-beta.1`版本开始支持
+
+::: endif
+
+### 代码演示
+
+#### 基础用法
+
+通过 `table` 组件 `data` 属性设置表格数据。
+
+通过 `table-col` 组件 `prop` 设置列数据源字段，`label` 属性设置列标题。
+
+```html
+<em-table :data="origin" :height="400" align="center">
+    <em-table-col prop="name" label="姓名" width="50%"></em-table-col>
+    <em-table-col prop="score" label="分数" width="50%"></em-table-col>
+</em-table>
+```
+
+::: ifdef M83
+
+```js
+export default {
+    data() {
+        return {
+            origin: [
+                {
+                    name: '赵云',
+                    score: 87
+                },
+                {
+                    name: '孔明',
+                    score: 100
+                },
+                {
+                    name: '刘备',
+                    score: 90
+                },
+                ...
+            ]
+        };
+    }
+};
+```
+
+::: endif
+::: ifdef M84
+
+```js
+import { ref } from 'vue';
+// 使用 ref 创建响应式数据
+const origin = ref([
+    {
+        name: '赵云',
+        score: 87
+    },
+    {
+        name: '孔明',
+        score: 100
+    },
+    {
+        name: '刘备',
+        score: 90
+    },
+    ...
+]);
+```
+
+::: endif
+
+#### 有边框
+
+通过 `table` 组件 `border` 属性设置表格边框。
+
+```html
+<em-table :data="origin" :height="400" align="center" border>
+    <em-table-col prop="name" label="姓名" width="50%"></em-table-col>
+    <em-table-col prop="score" label="分数" width="50%"></em-table-col>
+</em-table>
+```
+
+::: ifdef M83
+
+```js
+export default {
+    data() {
+        return {
+            origin: [
+                {
+                    name: '赵云',
+                    score: 87
+                },
+                {
+                    name: '孔明',
+                    score: 100
+                },
+                {
+                    name: '刘备',
+                    score: 90
+                },
+                ...
+            ]
+        };
+    }
+};
+```
+
+::: endif
+::: ifdef M84
+
+```js
+import { ref } from 'vue';
+// 使用 ref 创建响应式数据
+const origin = ref([
+    {
+        name: '赵云',
+        score: 87
+    },
+    {
+        name: '孔明',
+        score: 100
+    },
+    {
+        name: '刘备',
+        score: 90
+    },
+    ...
+]);
+```
+
+::: endif
+
+#### 无斑马纹
+
+通过设置 `table` 组件 `stripe` 为 `false` 取消斑马纹。
+
+```html
+<em-table :data="origin" :height="400" align="center" border :stripe="false">
+    <em-table-col prop="name" label="姓名" width="50%"></em-table-col>
+    <em-table-col prop="score" label="分数" width="50%"></em-table-col>
+</em-table>
+```
+
+::: ifdef M83
+
+```js
+export default {
+    data() {
+        return {
+            origin: [
+                {
+                    name: '赵云',
+                    score: 87
+                },
+                {
+                    name: '孔明',
+                    score: 100
+                },
+                {
+                    name: '刘备',
+                    score: 90
+                },
+                ...
+            ]
+        };
+    }
+};
+```
+
+::: endif
+::: ifdef M84
+
+```js
+import { ref } from 'vue';
+// 使用 ref 创建响应式数据
+const origin = ref([
+    {
+        name: '赵云',
+        score: 87
+    },
+    {
+        name: '孔明',
+        score: 100
+    },
+    {
+        name: '刘备',
+        score: 90
+    },
+    ...
+]);
+```
+
+::: endif
+
+#### 不展示表头
+
+通过设置 `table` 组件 `showHeader` 为 `false` 隐藏表头。
+
+```html
+<em-table :data="origin" :height="400" align="center" :showHeader="false">
+    <em-table-col prop="name" label="姓名" width="50%"></em-table-col>
+    <em-table-col prop="score" label="分数" width="50%"></em-table-col>
+</em-table>
+```
+
+::: ifdef M83
+
+```js
+export default {
+    data() {
+        return {
+            origin: [
+                {
+                    name: '赵云',
+                    score: 87
+                },
+                {
+                    name: '孔明',
+                    score: 100
+                },
+                {
+                    name: '刘备',
+                    score: 90
+                },
+                ...
+            ]
+        };
+    }
+};
+```
+
+::: endif
+::: ifdef M84
+
+```js
+import { ref } from 'vue';
+// 使用 ref 创建响应式数据
+const origin = ref([
+    {
+        name: '赵云',
+        score: 87
+    },
+    {
+        name: '孔明',
+        score: 100
+    },
+    {
+        name: '刘备',
+        score: 90
+    },
+    ...
+]);
+```
+
+::: endif
+
+#### 固定列
+
+通过设置 `table-col` 组件 `fixed` 为 `true`，在横向滚动时固定对应列。
+
+```html
+<em-table :data="origin" :height="400" align="center">
+    <em-table-col prop="name" label="姓名" fixed></em-table-col>
+    <em-table-col prop="score" label="分数" fixed></em-table-col>
+    <em-table-col prop="school" label="求学之所"></em-table-col>
+    <em-table-col prop="major" label="专业" width="150"></em-table-col>
+    <em-table-col prop="grade" label="年级"></em-table-col>
+</em-table>
+```
+
+::: ifdef M83
+
+```js
+export default {
+    data() {
+        return {
+            origin: [
+                {
+                    name: '赵云',
+                    score: 87,
+                    school: '河南理工大学',
+                    major: '计算机科学与技术',
+                    grade: '2015级'
+                },
+                {
+                    name: '孔明',
+                    score: 100,
+                    school: '河南理工大学',
+                    major: '计算机科学与技术',
+                    grade: '2015级'
+                },
+                {
+                    name: '刘备',
+                    score: 90,
+                    school: '河南理工大学',
+                    major: '计算机科学与技术',
+                    grade: '2015级'
+                },
+                ...
+            ]
+        };
+    }
+};
+```
+
+::: endif
+::: ifdef M84
+
+```js
+import { ref } from 'vue';
+// 使用 ref 创建响应式数据
+const origin = ref([
+    {
+        name: '赵云',
+        score: 87,
+        school: '河南理工大学',
+        major: '计算机科学与技术',
+        grade: '2015级'
+    },
+    {
+        name: '孔明',
+        score: 100,
+        school: '河南理工大学',
+        major: '计算机科学与技术',
+        grade: '2015级'
+    },
+    {
+        name: '刘备',
+        score: 90,
+        school: '河南理工大学',
+        major: '计算机科学与技术',
+        grade: '2015级'
+    },
+    ...
+]);
+```
+
+::: endif
+
+#### 显示索引
+
+通过设置 `table` 组件 `index` 为 `true`，展示索引列。
+
+`index` 也可传入一个对象来对索引列进行配置，该对象可配置参数参考 `table-col` 组件的 `props`。
+
+```html
+<em-table :data="origin" :height="400" align="center" :index="{ align: 'center', width: 40 }">
+    <em-table-col prop="name" label="姓名"></em-table-col>
+    <em-table-col prop="score" label="分数"></em-table-col>
+    <em-table-col prop="school" label="求学之所"></em-table-col>
+    <em-table-col prop="major" label="专业" width="150"></em-table-col>
+    <em-table-col prop="grade" label="年级"></em-table-col>
+</em-table>
+```
+
+::: ifdef M83
+
+```js
+export default {
+    data() {
+        return {
+            origin: [
+                {
+                    name: '赵云',
+                    score: 87,
+                    school: '河南理工大学',
+                    major: '计算机科学与技术',
+                    grade: '2015级'
+                },
+                {
+                    name: '孔明',
+                    score: 100,
+                    school: '河南理工大学',
+                    major: '计算机科学与技术',
+                    grade: '2015级'
+                },
+                {
+                    name: '刘备',
+                    score: 90,
+                    school: '河南理工大学',
+                    major: '计算机科学与技术',
+                    grade: '2015级'
+                },
+                ...
+            ]
+        };
+    }
+};
+```
+
+::: endif
+::: ifdef M84
+
+```js
+import { ref } from 'vue';
+// 使用 ref 创建响应式数据
+const origin = ref([
+    {
+        name: '赵云',
+        score: 87,
+        school: '河南理工大学',
+        major: '计算机科学与技术',
+        grade: '2015级'
+    },
+    {
+        name: '孔明',
+        score: 100,
+        school: '河南理工大学',
+        major: '计算机科学与技术',
+        grade: '2015级'
+    },
+    {
+        name: '刘备',
+        score: 90,
+        school: '河南理工大学',
+        major: '计算机科学与技术',
+        grade: '2015级'
+    },
+    ...
+]);
+```
+
+::: endif
+
+#### 排序事件
+
+通过设置 `table-col` 组件 `sortable` 为 `true`，开启该列排序功能。
+
+通过监听 `table` 组件 `sort` 事件，获取对应列排序信息及配置信息（参考`table-col`的 `props`），进行数据排序。
+
+```html
+<em-table :data="dataList" :height="400" align="center" @sort="handleSort">
+    <em-table-col prop="name" label="姓名" sortable></em-table-col>
+    <em-table-col prop="score" label="分数" sortable></em-table-col>
+    <em-table-col prop="school" label="求学之所"></em-table-col>
+    <em-table-col prop="major" label="专业" width="150"></em-table-col>
+    <em-table-col prop="grade" label="年级"></em-table-col>
+</em-table>
+```
+
+::: ifdef M83
+
+```js
+export default {
+    data() {
+        return {
+            dataList: [],
+            origin: [
+                {
+                    name: '赵云',
+                    score: 87,
+                    school: '河南理工大学',
+                    major: '计算机科学与技术',
+                    grade: '2015级'
+                },
+                {
+                    name: '孔明',
+                    score: 100,
+                    school: '河南理工大学',
+                    major: '计算机科学与技术',
+                    grade: '2015级'
+                },
+                {
+                    name: '刘备',
+                    score: 90,
+                    school: '河南理工大学',
+                    major: '计算机科学与技术',
+                    grade: '2015级'
+                },
+                ...
+            ]
+        };
+    },
+    created() {
+        this.dataList = this.origin.slice(0);
+    },
+    methods: {
+        handleSort(e) {
+            // e.sortDirection === 0, 未排序
+            // e.sortDirection === -1，升序, 箭头向下
+            // e.sortDirection === 1，降序, 箭头向上
+            const getSortFn = (prop, sortDirection) => {
+                if (prop === 'name') {
+                    return (a, b) => b.name.localeCompare(a.name) * sortDirection;
+                } else if (prop === 'score') {
+                    return (a, b) => (b.score - a.score) * sortDirection;
+                }
+            };
+            this.dataList = this.origin.slice(0);
+            this.dataList.sort(getSortFn(e.prop, e.sortDirection));
+        }
+    }
+};
+```
+
+::: endif
+::: ifdef M84
+
+```js
+import { ref } from 'vue';
+// 使用 ref 创建响应式数据
+const dataList = ref([]);
+const origin = ref([
+    {
+        name: '赵云',
+        score: 87,
+        school: '河南理工大学',
+        major: '计算机科学与技术',
+        grade: '2015级'
+    },
+    {
+        name: '孔明',
+        score: 100,
+        school: '河南理工大学',
+        major: '计算机科学与技术',
+        grade: '2015级'
+    },
+    {
+        name: '刘备',
+        score: 90,
+        school: '河南理工大学',
+        major: '计算机科学与技术',
+        grade: '2015级'
+    },
+    ...
+]);
+
+dataList.value = origin.value.slice(0);
+
+const handleSort = (e) => {
+    // e.sortDirection === 0, 未排序
+    // e.sortDirection === -1，升序, 箭头向下
+    // e.sortDirection === 1，降序, 箭头向上
+    const getSortFn = (prop, sortDirection) => {
+        if (prop === 'name') {
+            return (a, b) => b.name.localeCompare(a.name) * sortDirection;
+        } else if (prop === 'score') {
+            return (a, b) => (b.score - a.score) * sortDirection;
+        }
+    };
+    dataList.value = origin.value.slice(0);
+    dataList.value.sort(getSortFn(e.prop, e.sortDirection));
+};
+```
+
+::: endif
+
+#### 自定义列模板
+
+通过 `table-col` 组件的 `value` 插槽，可以自定义该列每项内容。
+
+通过 `Scoped slot` 可以获取到 `row`（该项数据）、 `index` 的数据
+
+```html
+<em-table :data="origin" :height="400" align="center">
+    <em-table-col prop="name" label="姓名"></em-table-col>
+    <em-table-col prop="score" label="分数">
+        <template #value="{ row }">
+            <view class="score-wrapper">
+                <view class="score">{{ row.score }}</view>
+                <view>
+                    同比
+                    <text class="compare">{{ row.compare }}</text>
+                </view>
+            </view>
+        </template>
+    </em-table-col>
+    <em-table-col prop="school" label="求学之所"></em-table-col>
+    <em-table-col prop="major" label="专业" width="150"></em-table-col>
+    <em-table-col prop="grade" label="年级"></em-table-col>
+</em-table>
+```
+
+::: ifdef M83
+
+```js
+export default {
+    data() {
+        return {
+            origin: [
+                {
+                    name: '赵云',
+                    score: 87,
+                    school: '河南理工大学',
+                    major: '计算机科学与技术',
+                    grade: '2015级',
+                    compare: '1.2%'
+                },
+                {
+                    name: '孔明',
+                    score: 100,
+                    school: '河南理工大学',
+                    major: '计算机科学与技术',
+                    grade: '2015级',
+                    compare: '1.2%'
+                },
+                {
+                    name: '刘备',
+                    score: 90,
+                    school: '河南理工大学',
+                    major: '计算机科学与技术',
+                    compare: '1.2%',
+                    grade: '2015级'
+                },
+                ...
+            ]
+        };
+    }
+};
+```
+
+::: endif
+::: ifdef M84
+
+```js
+import { ref } from 'vue';
+// 使用 ref 创建响应式数据
+const origin = ref([
+    {
+        name: '赵云',
+        score: 87,
+        school: '河南理工大学',
+        major: '计算机科学与技术',
+        grade: '2015级',
+        compare: '1.2%'
+    },
+    {
+        name: '孔明',
+        score: 100,
+        school: '河南理工大学',
+        major: '计算机科学与技术',
+        grade: '2015级',
+        compare: '1.2%'
+    },
+    {
+        name: '刘备',
+        score: 90,
+        school: '河南理工大学',
+        major: '计算机科学与技术',
+        compare: '1.2%',
+        grade: '2015级'
+    },
+    ...
+]);
+```
+
+::: endif
+
+#### 不固定表头结合分页器使用
+
+```html
+<em-table :data="dataList" align="center" :fixed-header="false">
+    <em-table-col prop="name" label="姓名" fixed></em-table-col>
+    <em-table-col prop="score" label="分数" fixed></em-table-col>
+    <em-table-col prop="school" label="求学之所"></em-table-col>
+    <em-table-col prop="major" label="专业" width="150"></em-table-col>
+    <em-table-col prop="grade" label="年级"></em-table-col>
+</em-table>
+<em-pagination
+    v-model="currentPage"
+    :items-per-page="perPageSize"
+    mode="simple"
+    :total-items="origin.length"
+></em-pagination>
+```
+
+::: ifdef M83
+
+```js
+export default {
+    data() {
+        return {
+            currentPage: 1,
+            perPageSize: 5,
+            origin: [
+                {
+                    name: '赵云',
+                    score: 87,
+                    school: '河南理工大学',
+                    major: '计算机科学与技术',
+                    grade: '2015级',
+                    compare: '1.2%'
+                },
+                {
+                    name: '孔明',
+                    score: 100,
+                    school: '河南理工大学',
+                    major: '计算机科学与技术',
+                    grade: '2015级',
+                    compare: '1.2%'
+                },
+                {
+                    name: '刘备',
+                    score: 90,
+                    school: '河南理工大学',
+                    major: '计算机科学与技术',
+                    compare: '1.2%',
+                    grade: '2015级'
+                },
+                ...
+            ]
+        };
+    },
+    computed: {
+        dataList(){
+            return this.origin.slice((this.currentPage - 1) * this.perPageSize, this.currentPage * this.perPageSize);
+        }
+    }
+};
+```
+
+::: endif
+::: ifdef M84
+
+```js
+import { ref, computed } from 'vue';
+// 使用 ref 创建响应式数据
+const currentPage = ref(1);
+const perPageSize = ref(5);
+const origin = ref([
+    {
+        name: '赵云',
+        score: 87,
+        school: '河南理工大学',
+        major: '计算机科学与技术',
+        grade: '2015级',
+        compare: '1.2%'
+    },
+    {
+        name: '孔明',
+        score: 100,
+        school: '河南理工大学',
+        major: '计算机科学与技术',
+        grade: '2015级',
+        compare: '1.2%'
+    },
+    {
+        name: '刘备',
+        score: 90,
+        school: '河南理工大学',
+        major: '计算机科学与技术',
+        compare: '1.2%',
+        grade: '2015级'
+    },
+    ...
+]);
+
+const dataList = computed(() => origin.value.slice((currentPage.value - 1) * perPageSize.value, currentPage.value * perPageSize.value));
+```
+
+::: endif
+
+### API
+
+#### Table Props
+
+| 参数         |                                      说明                                       | 类型            | 默认值  |
+| :----------- | :-----------------------------------------------------------------------------: | :-------------- | :------ |
+| data         |                                   表格数据源                                    | array           | `-`     |
+| border       |                                  是否带有边框                                   | boolean         | `false` |
+| stripe       |                                 是否为斑马纹表                                  | boolean         | `true`  |
+| height       |           Table 的高度，无默认值，设置后自动开启固定表头，默认单位 px           | number / string | `-`     |
+| rowHeight    |                                行高，默认单位 px                                | number / string | `50`    |
+| showHeader   |                                  是否显示表头                                   | boolean         | `true`  |
+| ellipsis     |                           文字较长时是否超出 2 行隐藏                           | boolean         | `true`  |
+| index        | 是否显示索引列，可传入 boolean 也可传入列配置，参数参考 `table-col`组件的 props | boolean /       | `false` |
+| fixed-header |            是否固定表头，需要结合 height 才可以实现固定表头的效果。             | boolean         | `true`  |
+| clickable    |                                是否开启点击反馈                                 | boolean         | `false` |
+| align        |              表格所有列对齐方式，可选值：`left`、`center`、`right`              | string          | `left`  |
+
+#### Table Events
+
+| 事件名    |                           说明                           | 回调参数                                                                                                           |
+| :-------- | :------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------- |
+| sort      | 点击排序时触发，当表格列 sortable 设置为 true 的时候有效 | e: { sortDirection: number (0--未排序, -1--箭头向下, 1--箭头向上), ...`TableColumn`(参考 `table-col`组件的 props)} |
+| row-click |               当某一行被点击时会触发该事件               | e: { rowIndex: number（点击行的下标）}                                                                             |
+
+#### Table 方法
+
+通过 ref 可以获取到 Table 实例并调用实例方法，详见组件实例方法
+
+| 方法名                  | 说明         | 参数 | 返回值 |
+| :---------------------- | :----------- | :--- | :----- |
+| resize `v8.4.4-beta.14` | 重新获取列宽 | -    | `void` |
+
+#### TableCol Props
+
+| 参数     |                      说明                       | 类型            | 默认值  |
+| :------- | :---------------------------------------------: | :-------------- | :------ |
+| prop     |           字段名称,对应列内容的字段名           | string          | `-`     |
+| label    |                     列标题                      | string          | `-`     |
+| width    | 对应列的宽度，默认单位为 px，不支持传入 `calc`  | number / string | `100`   |
+| sortable |                 是否开启列排序                  | boolean         | `false` |
+| fixed    |                  是否固定本列                   | boolean         | `false` |
+| align    | 列的对齐方式, 可选值：`left`、`center`、`right` | string          | `left`  |
+
+#### TableCol Slots
+
+| 名称  | 说明               | 参数                                               |
+| :---- | :----------------- | :------------------------------------------------- |
+| value | 自定义列每项的内容 | row: Object （该项数据），index: number (该项下标) |
+
+::: ifdef M83
+
+<iframe
+ src="//app.epoint.com.cn/m8mpdoc/showcase/index.html#/modules/m8showcase/examples/em-table"
+ frameborder=0
+ allowfullscreen class="ui-showcase-iframe">
+  </iframe>
+::: endif
+::: ifdef M84
+<iframe
+ src="//app.epoint.com.cn/m8mpdoc/showcase/m8.4/index.html#/modules/m8showcase/examples/em-table"
+ frameborder=0
+ allowfullscreen class="ui-showcase-iframe">
+  </iframe>
+::: endif
+
+ <style>
+ .ui-showcase-iframe {
+    position: fixed;
+    right: 3.5vw;
+    top: 17%;
+    width: 375px;
+    height: 75vh;
+    box-shadow: 0 0 12px 6px #eee;
+    border-radius: 15px;
+ }
+ .main .markdown-body {
+    padding: 45px;
+    width: calc(97vw - 661px);
+}
+ </style>