iov-pro-components 0.0.3

package/docs/components/pro-table.md

@@ -0,0 +1,683 @@
+# 表格 ProTable
+
+## 基础使用
+
+::: demo
+```html
+<template>
+  <iov-pro-table
+    :data-source="dataSource"
+    :columns="COLUMNS"
+  >
+    <template #operate="{ row }">
+      <iov-pro-link-group>
+        <el-link type="primary">编辑</el-link>
+        <el-link type="primary" @click="onDelete(row)">删除</el-link>
+      </iov-pro-link-group>
+    </template>
+  </iov-pro-table>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      dataSource: [
+        { name: '郭靖', age: '38', location: '山东' },
+        { name: '黄蓉', age: '32', location: '桃花岛' },
+        { name: '杨过', age: '20', location: '终南山下古墓' },
+        { name: '小龙女', age: '22', location: '终南山下古墓' },
+        { name: '金轮法王', age: '39', location: '蒙古草原' },
+        { name: '段智兴', age: '61', location: '云南大理' },
+        { name: '洪七公', age: '59', location: '四海' },
+        { name: '黄药师', age: '61', location: '桃花岛' },
+        { name: '欧阳锋', age: '58', location: '西域' },
+        { name: '周伯通', age: '58', location: '终南山' },
+        { name: '王重阳', age: '63', location: '终南山' },
+      ],
+      COLUMNS: [
+        { type: 'index', label: '序号', width: '80px' },
+        { label: '姓名', prop: 'name', minWidth: '160px' },
+        { label: '年龄', prop: 'age', width: '100px' },
+        { label: '籍贯', prop: 'location', minWidth: '280px' },
+        { label: '操作', prop: 'operate', type: 'slot', fixed: 'right', align: 'right', width: '100px' }
+      ]
+    }
+  },
+
+  methods: {
+    /**
+     * 删除指定行
+     * @param  {Object} row 当前行数据
+     */
+    onDelete(row) {
+      this.dataSource = this.dataSource.filter(item => item !== row)
+    }
+  }
+}
+</script>
+```
+:::
+
+
+## 枚举
+
+::: demo
+```html
+<template>
+  <iov-pro-table
+    :data-source="dataSource"
+    :columns="COLUMNS"
+  >
+    <template #operate="{ row }">
+      <iov-pro-link-group>
+        <el-link type="primary">编辑</el-link>
+        <el-link type="primary" @click="onDelete(row)">删除</el-link>
+      </iov-pro-link-group>
+    </template>
+  </iov-pro-table>
+</template>
+
+<script>
+export default {
+  data() {
+    const DICT = {
+      SEX: [
+        { label: '男', value: 1 },
+        { label: '女', value: 0 }
+      ]
+    }
+    return {
+      dataSource: [
+        { name: '郭靖', age: '38', sex: 1, location: '山东' },
+        { name: '黄蓉', age: '32', sex: 0, location: '桃花岛' },
+        { name: '杨过', age: '20', sex: 1, location: '终南山下古墓' },
+        { name: '小龙女', age: '22', sex: 0, location: '终南山下古墓' },
+        { name: '金轮法王', age: '39', sex: 1, location: '蒙古草原' },
+        { name: '段智兴', age: '61', sex: 1, location: '云南大理' },
+        { name: '洪七公', age: '59', sex: 1, location: '四海' },
+        { name: '黄药师', age: '61', sex: 1, location: '桃花岛' },
+        { name: '欧阳锋', age: '58', sex: 1, location: '西域' },
+        { name: '周伯通', age: '58', sex: 1, location: '终南山' },
+        { name: '王重阳', age: '63', sex: 1, location: '终南山' },
+      ],
+      COLUMNS: [
+        { type: 'index', label: '序号', width: '80px' },
+        { label: '姓名', prop: 'name', minWidth: '160px' },
+        { label: '性别', prop: 'sex', type: 'enum', enums: DICT.SEX, width: '100px' },
+        { label: '年龄', prop: 'age', width: '100px' },
+        { label: '籍贯', prop: 'location', minWidth: '280px' },
+        { label: '操作', prop: 'operate', type: 'slot', fixed: 'right', align: 'right', width: '100px' }
+      ]
+    }
+  },
+
+  methods: {
+    /**
+     * 删除指定行
+     * @param  {Object} row 当前行数据
+     */
+    onDelete(row) {
+      this.dataSource = this.dataSource.filter(item => item !== row)
+    }
+  }
+}
+</script>
+```
+:::
+
+## 标签
+
+::: demo
+```html
+<template>
+  <iov-pro-table
+    :data-source="dataSource"
+    :columns="COLUMNS"
+  >
+    <template #operate="{ row }">
+      <iov-pro-link-group>
+        <el-link type="primary">编辑</el-link>
+        <el-link type="primary" @click="onDelete(row)">删除</el-link>
+      </iov-pro-link-group>
+    </template>
+  </iov-pro-table>
+</template>
+
+<script>
+export default {
+  data() {
+    const DICT = {
+      STATUS: [
+        { label: '启用', value: 1, type: 'success' },
+        { label: '停用', value: 0, type: 'info' }
+      ]
+    }
+    return {
+      dataSource: [
+        { name: '郭靖', age: '38', status: 1, location: '山东' },
+        { name: '黄蓉', age: '32', status: 0, location: '桃花岛' },
+        { name: '杨过', age: '20', status: 1, location: '终南山下古墓' },
+        { name: '小龙女', age: '22', status: 0, location: '终南山下古墓' },
+        { name: '金轮法王', age: '39', status: 1, location: '蒙古草原' },
+        { name: '段智兴', age: '61', status: 1, location: '云南大理' },
+        { name: '洪七公', age: '59', status: 1, location: '四海' },
+        { name: '黄药师', age: '61', status: 1, location: '桃花岛' },
+        { name: '欧阳锋', age: '58', status: 1, location: '西域' },
+        { name: '周伯通', age: '58', status: 1, location: '终南山' },
+        { name: '王重阳', age: '63', status: 1, location: '终南山' },
+      ],
+      COLUMNS: [
+        { type: 'index', label: '序号', width: '80px' },
+        { label: '姓名', prop: 'name', minWidth: '160px' },
+        { label: '状态', prop: 'status', type: 'tag', enums: DICT.STATUS, width: '100px' },
+        { label: '年龄', prop: 'age', width: '100px' },
+        { label: '籍贯', prop: 'location', minWidth: '280px' },
+        { label: '操作', prop: 'operate', type: 'slot', fixed: 'right', align: 'right', width: '100px' }
+      ]
+    }
+  },
+
+  methods: {
+    /**
+     * 删除指定行
+     * @param  {Object} row 当前行数据
+     */
+    onDelete(row) {
+      this.dataSource = this.dataSource.filter(item => item !== row)
+    }
+  }
+}
+</script>
+```
+:::
+
+
+## 插槽
+
+当定义 `type` 为 `Slot` 时，将会自动使用 `prop` 的值作为 插槽名。也可以使用 `slotName` 自定义插槽名。
+
+::: demo
+```html
+<template>
+  <iov-pro-table
+    :data-source="dataSource"
+    :columns="COLUMNS"
+  >
+    <template #name="{ row }">{{ row.name }}</template>
+    <template #operate="{ row }">
+      <iov-pro-link-group>
+        <el-link type="primary">编辑</el-link>
+        <el-link type="primary" @click="onDelete(row)">删除</el-link>
+      </iov-pro-link-group>
+    </template>
+  </iov-pro-table>
+</template>
+
+<script>
+export default {
+  data() {
+    const DICT = {
+      STATUS: [
+        { label: '启用', value: 1, type: 'success' },
+        { label: '停用', value: 0, type: 'info' }
+      ]
+    }
+    return {
+      dataSource: [
+        { name: '郭靖', age: '38', status: 1, location: '山东' },
+        { name: '黄蓉', age: '32', status: 0, location: '桃花岛' },
+        { name: '杨过', age: '20', status: 1, location: '终南山下古墓' },
+        { name: '小龙女', age: '22', status: 0, location: '终南山下古墓' },
+        { name: '金轮法王', age: '39', status: 1, location: '蒙古草原' },
+        { name: '段智兴', age: '61', status: 1, location: '云南大理' },
+        { name: '洪七公', age: '59', status: 1, location: '四海' },
+        { name: '黄药师', age: '61', status: 1, location: '桃花岛' },
+        { name: '欧阳锋', age: '58', status: 1, location: '西域' },
+        { name: '周伯通', age: '58', status: 1, location: '终南山' },
+        { name: '王重阳', age: '63', status: 1, location: '终南山' },
+      ],
+      COLUMNS: [
+        { type: 'index', label: '序号', width: '80px' },
+        { label: '姓名', prop: 'name', type: 'slot', minWidth: '160px' },
+        { label: '状态', prop: 'status', type: 'tag', enums: DICT.STATUS, width: '100px' },
+        { label: '年龄', prop: 'age', width: '100px' },
+        { label: '籍贯', prop: 'location', minWidth: '280px' },
+        { label: '操作', prop: 'operate', type: 'slot', fixed: 'right', align: 'right', width: '100px' }
+      ]
+    }
+  },
+
+  methods: {
+    /**
+     * 删除指定行
+     * @param  {Object} row 当前行数据
+     */
+    onDelete(row) {
+      this.dataSource = this.dataSource.filter(item => item !== row)
+    }
+  }
+}
+</script>
+```
+:::
+
+
+## 表头筛选
+
+::: demo
+```html
+<template>
+  <iov-pro-table
+    :data-source="dataSource"
+    :columns="COLUMNS"
+  >
+    <template #operate="{ row }">
+      <iov-pro-link-group>
+        <el-link type="primary">编辑</el-link>
+        <el-link type="primary" @click="onDelete(row)">删除</el-link>
+      </iov-pro-link-group>
+    </template>
+  </iov-pro-table>
+</template>
+
+<script>
+export default {
+  data() {
+    const DICT = {
+      STATUS: [
+        { label: '启用', value: 1, type: 'success' },
+        { label: '停用', value: 0, type: 'info' }
+      ]
+    }
+    return {
+      dataSource: [
+        { name: '郭靖', age: '38', status: 1, location: '山东' },
+        { name: '黄蓉', age: '32', status: 0, location: '桃花岛' },
+        { name: '杨过', age: '20', status: 1, location: '终南山下古墓' },
+        { name: '小龙女', age: '22', status: 0, location: '终南山下古墓' },
+        { name: '金轮法王', age: '39', status: 1, location: '蒙古草原' },
+        { name: '段智兴', age: '61', status: 1, location: '云南大理' },
+        { name: '洪七公', age: '59', status: 1, location: '四海' },
+        { name: '黄药师', age: '61', status: 1, location: '桃花岛' },
+        { name: '欧阳锋', age: '58', status: 1, location: '西域' },
+        { name: '周伯通', age: '58', status: 1, location: '终南山' },
+        { name: '王重阳', age: '63', status: 1, location: '终南山' },
+      ],
+      COLUMNS: [
+        { type: 'index', label: '序号', width: '80px' },
+        { label: '姓名', prop: 'name', searchable: true, minWidth: '160px' },
+        { label: '状态', prop: 'status', filters: DICT.STATUS, type: 'tag', enums: DICT.STATUS, width: '100px' },
+        { label: '年龄', prop: 'age', sortable: true, width: '100px' },
+        { label: '籍贯', prop: 'location', minWidth: '280px' },
+        { label: '操作', prop: 'operate', type: 'slot', fixed: 'right', align: 'right', width: '100px' }
+      ]
+    }
+  },
+
+  methods: {
+    /**
+     * 删除指定行
+     * @param  {Object} row 当前行数据
+     */
+    onDelete(row) {
+      this.dataSource = this.dataSource.filter(item => item !== row)
+    }
+  }
+}
+</script>
+```
+:::
+
+## 接口加载
+
+::: demo
+```html
+<template>
+  <iov-pro-table
+    :request="{ api: apiMock, params }"
+    :columns="COLUMNS"
+  >
+    <template #operate="{ row }">
+      <iov-pro-link-group>
+        <el-link type="primary">编辑</el-link>
+        <el-link type="primary" @click="onDelete(row)">删除</el-link>
+      </iov-pro-link-group>
+    </template>
+  </iov-pro-table>
+</template>
+
+<script>
+const apiMock = (params) => {
+  return new Promise((resolve, reject) => {
+    const { name, currPage, pageSize } = params
+    // 总数据
+    const list = [
+      { name: '郭靖', age: '38', location: '山东' },
+      { name: '黄蓉', age: '32', location: '桃花岛' },
+      { name: '杨过', age: '20', location: '终南山下古墓' },
+      { name: '小龙女', age: '22', location: '终南山下古墓' },
+      { name: '金轮法王', age: '39', location: '蒙古草原' },
+      { name: '段智兴', age: '61', location: '云南大理' },
+      { name: '洪七公', age: '59', location: '四海' },
+      { name: '黄药师', age: '61', location: '桃花岛' },
+      { name: '欧阳锋', age: '58', location: '西域' },
+      { name: '周伯通', age: '58', location: '终南山' },
+      { name: '王重阳', age: '63', location: '终南山' }
+    ]
+    setTimeout(() => {
+      resolve({
+        list: list.filter(item => !name || item.name.indexOf(name) >= 0).slice((currPage - 1) * pageSize, currPage * pageSize),
+        totalCount: 11
+      })
+    }, 300)
+  })
+}
+
+export default {
+  data() {
+    return {
+      params: {
+        id: 'A1918892818'
+      },
+      COLUMNS: [
+        { type: 'index', label: '序号', width: '80px' },
+        { label: '姓名', searchable: true, prop: 'name', minWidth: '160px' },
+        { label: '年龄', prop: 'age', width: '100px' },
+        { label: '籍贯', prop: 'location', minWidth: '280px' },
+        { label: '操作', prop: 'operate', type: 'slot', fixed: 'right', align: 'right', width: '100px' }
+      ]
+    }
+  },
+
+  methods: {
+    apiMock,
+
+    /**
+     * 删除指定行
+     * @param  {Object} row 当前行数据
+     */
+    onDelete(row) {
+      this.dataSource = this.dataSource.filter(item => item !== row)
+    }
+  }
+}
+</script>
+```
+:::
+
+## 设置分页属性
+
+::: demo
+```html
+<template>
+  <iov-pro-table
+    :request="{ api: apiMock, params }"
+    :columns="COLUMNS"
+    :config="{ table: { border: false }, pagination: { pageSizes: [5, 10, 20, 50], pageSize: 5 } }"
+  >
+    <template #operate="{ row }">
+      <iov-pro-link-group>
+        <el-link type="primary">编辑</el-link>
+        <el-link type="primary" @click="onDelete(row)">删除</el-link>
+      </iov-pro-link-group>
+    </template>
+  </iov-pro-table>
+</template>
+
+<script>
+const apiMock = (params) => {
+  return new Promise((resolve, reject) => {
+    const { name, currPage, pageSize } = params
+    // 总数据
+    const list = [
+      { name: '郭靖', age: '38', location: '山东' },
+      { name: '黄蓉', age: '32', location: '桃花岛' },
+      { name: '杨过', age: '20', location: '终南山下古墓' },
+      { name: '小龙女', age: '22', location: '终南山下古墓' },
+      { name: '金轮法王', age: '39', location: '蒙古草原' },
+      { name: '段智兴', age: '61', location: '云南大理' },
+      { name: '洪七公', age: '59', location: '四海' },
+      { name: '黄药师', age: '61', location: '桃花岛' },
+      { name: '欧阳锋', age: '58', location: '西域' },
+      { name: '周伯通', age: '58', location: '终南山' },
+      { name: '王重阳', age: '63', location: '终南山' }
+    ]
+    setTimeout(() => {
+      resolve({
+        list: list.filter(item => !name || item.name.indexOf(name) >= 0).slice((currPage - 1) * pageSize, currPage * pageSize),
+        totalCount: 11
+      })
+    }, 300)
+  })
+}
+
+export default {
+  data() {
+    return {
+      params: {
+        id: 'A1918892818'
+      },
+      COLUMNS: [
+        { type: 'index', label: '序号', width: '80px' },
+        { label: '姓名', searchable: true, prop: 'name', minWidth: '160px' },
+        { label: '年龄', prop: 'age', width: '100px' },
+        { label: '籍贯', prop: 'location', minWidth: '280px' },
+        { label: '操作', prop: 'operate', type: 'slot', fixed: 'right', align: 'right', width: '100px' }
+      ]
+    }
+  },
+
+  methods: {
+    apiMock,
+
+    /**
+     * 删除指定行
+     * @param  {Object} row 当前行数据
+     */
+    onDelete(row) {
+      this.dataSource = this.dataSource.filter(item => item !== row)
+    }
+  }
+}
+</script>
+```
+:::
+
+## 无分页
+
+::: demo
+```html
+<template>
+  <iov-pro-table
+    :request="{ api: apiMock, params }"
+    :columns="COLUMNS"
+    :config="{ table: { border: false }, pagination: false }"
+  >
+    <template #operate="{ row }">
+      <iov-pro-link-group>
+        <el-link type="primary">编辑</el-link>
+        <el-link type="primary" @click="onDelete(row)">删除</el-link>
+      </iov-pro-link-group>
+    </template>
+  </iov-pro-table>
+</template>
+
+<script>
+const apiMock = (params) => {
+  return new Promise((resolve, reject) => {
+    const { name, currPage, pageSize } = params
+    // 总数据
+    const list = [
+      { name: '郭靖', age: '38', location: '山东' },
+      { name: '黄蓉', age: '32', location: '桃花岛' },
+      { name: '杨过', age: '20', location: '终南山下古墓' },
+      { name: '小龙女', age: '22', location: '终南山下古墓' },
+      { name: '金轮法王', age: '39', location: '蒙古草原' },
+      { name: '段智兴', age: '61', location: '云南大理' },
+      { name: '洪七公', age: '59', location: '四海' },
+      { name: '黄药师', age: '61', location: '桃花岛' },
+      { name: '欧阳锋', age: '58', location: '西域' },
+      { name: '周伯通', age: '58', location: '终南山' },
+      { name: '王重阳', age: '63', location: '终南山' }
+    ]
+    setTimeout(() => {
+      resolve({ list })
+    }, 300)
+  })
+}
+
+export default {
+  data() {
+    return {
+      params: {
+        id: 'A1918892818'
+      },
+      COLUMNS: [
+        { type: 'index', label: '序号', width: '80px' },
+        { label: '姓名', searchable: true, prop: 'name', minWidth: '160px' },
+        { label: '年龄', prop: 'age', width: '100px' },
+        { label: '籍贯', prop: 'location', minWidth: '280px' },
+        { label: '操作', prop: 'operate', type: 'slot', fixed: 'right', align: 'right', width: '100px' }
+      ]
+    }
+  },
+
+  methods: {
+    apiMock,
+
+    /**
+     * 删除指定行
+     * @param  {Object} row 当前行数据
+     */
+    onDelete(row) {
+      this.dataSource = this.dataSource.filter(item => item !== row)
+    }
+  }
+}
+</script>
+```
+:::
+
+
+## 多选
+
+::: demo
+```html
+<template>
+  <iov-pro-table
+    :data-source="dataSource"
+    :columns="COLUMNS"
+    @selection-change="onSelectionChange"
+  >
+    <template #operate="{ row }">
+      <iov-pro-link-group>
+        <el-link type="primary">编辑</el-link>
+        <el-link type="primary" @click="onDelete(row)">删除</el-link>
+      </iov-pro-link-group>
+    </template>
+  </iov-pro-table>
+</template>
+
+<script>
+export default {
+  data() {
+    const DICT = {
+      STATUS: [
+        { label: '启用', value: 1, type: 'success' },
+        { label: '停用', value: 0, type: 'info' }
+      ]
+    }
+    return {
+      dataSource: [
+        { name: '郭靖', age: '38', status: 1, location: '山东' },
+        { name: '黄蓉', age: '32', status: 0, location: '桃花岛' },
+        { name: '杨过', age: '20', status: 1, location: '终南山下古墓' },
+        { name: '小龙女', age: '22', status: 0, location: '终南山下古墓' },
+        { name: '金轮法王', age: '39', status: 1, location: '蒙古草原' },
+        { name: '段智兴', age: '61', status: 1, location: '云南大理' },
+        { name: '洪七公', age: '59', status: 1, location: '四海' },
+        { name: '黄药师', age: '61', status: 1, location: '桃花岛' },
+        { name: '欧阳锋', age: '58', status: 1, location: '西域' },
+        { name: '周伯通', age: '58', status: 1, location: '终南山' },
+        { name: '王重阳', age: '63', status: 1, location: '终南山' },
+      ],
+      COLUMNS: [
+        { type: 'selection', width: '80px' },
+        { label: '姓名', prop: 'name', searchable: true, minWidth: '160px' },
+        { label: '状态', prop: 'status', filters: DICT.STATUS, type: 'tag', enums: DICT.STATUS, width: '100px' },
+        { label: '年龄', prop: 'age', sortable: true, width: '100px' },
+        { label: '籍贯', prop: 'location', minWidth: '280px' },
+        { label: '操作', prop: 'operate', type: 'slot', fixed: 'right', align: 'right', width: '100px' }
+      ]
+    }
+  },
+
+  methods: {
+    /**
+     * 删除指定行
+     * @param  {Object} row 当前行数据
+     */
+    onDelete(row) {
+      this.dataSource = this.dataSource.filter(item => item !== row)
+    },
+
+    /**
+     * 当前选中的数据
+     * @param  {Array} list 当前选中的数据
+     */
+    onSelectionChange(list) {
+      // 记录当前选中的数据
+      this.selectionList = list
+      this.$message.success(`当前选中了${list.length}条数据`)
+    }
+  }
+}
+</script>
+```
+:::
+
+## Attributes
+
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+| ------- | ------- | ------- | ------- | ------- |
+| request | 请求函数，详见下方 `Request` 配置 | Object | -  | - |
+| columns | 描述项配置，详见下方 `Column` 配置 | Array | - | - |
+| dataSource | 外部数据源，用于用于渲染表格的数据 | Array | - | - |
+| config | 表格配置，用于配置表格/分页器的展示，详见下方 Config 配置 | Object | - | - |
+
+
+## Column Attributes
+下方仅列举常用属性，[全部属性，请点击](https://element.eleme.cn/#/zh-CN/component/table#table-column-attributes)。
+
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+| ------- | ------- | ------- | ------- | ------- |
+| type | 当前使用表格项类型 | String | index/selection/tag/enum/slot/img | - |
+| label | 表格项标题 | String | - | - |
+| prop | 对应列内容的字段名 | String | - | - |
+| width | 对应列的宽度	 | String | - | - |
+| minWidth | 对应列的最小宽度 | String | - | - |
+| fixed | 列是否固定在左侧或者右侧，true 表示固定在左侧 | String/Boolean | true, left, right | - |
+| align | 对齐方式 | left/center/right | - | - |
+| selectable | 仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选 | Function(row, index) | - | - |
+
+## Config Attributes
+
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+| ------- | ------- | ------- | ------- | ------- |
+| table | [表格配置](https://element.eleme.cn/#/zh-CN/component/table#table-attributes) | Object | -  | - |
+| pagination | [分页器属性](https://element.eleme.cn/#/zh-CN/component/pagination#attributes) | Object/false | - | - |
+
+## Request Attributes
+
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+| ------- | ------- | ------- | ------- | ------- |
+| api | 接口请求方法 | Function(params) | -  | - |
+| params | 接口请求入参 | Object | - | - |
+| reloadOnParamsChange | 当params发生变化，是否重新请求接口 | Boolean | - | true |
+| requiredFields | 接口请求必须的字段 | String/Array | - | - |
+| default | 接口没有加载成功前的默认值 | Array/Object | - | - |
+| threshold | 接口请求的阈值间隔 | Number | - | 50 |
+
+## Table Methods
+方法由[Element原生Table方法](https://element.eleme.cn/#/zh-CN/component/table#table-methods) + [Element原生Pagination方法](https://element.eleme.cn/#/zh-CN/component/pagination#events)组成