m8-framework-mcp 1.0.0 → 1.0.3

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

@@ -1,849 +0,0 @@
-# 组件使用
-
-## 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>