iov-pro-components 0.0.3

package/docs/components/search-table.md

@@ -0,0 +1,963 @@
+---
+pageClass: grey-background-demo-content
+---
+
+# 搜索表单 SearchTable
+搜索表单组件由表单组件（ProForm）+表格组件（ProTable）构成，并集成了类如表格刷新，双向绑定，表头设置等快捷功能。且提供了3种模板样式可供选择。
+
+## 基础使用
+
+::: demo
+```html
+<template>
+  <iov-pro-search-table
+    title="用户列表"
+    :request="{ api: apiMock, params }"
+    :form-items="ITEMS"
+    :table-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-search-table>
+</template>
+
+<script>
+const apiMock = (params) => {
+  return new Promise((resolve, reject) => {
+    const { name, sex, currPage, pageSize } = params
+    // 总数据
+    const list = [
+      { 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', lsex: 1,ocation: '终南山' }
+    ]
+    // 过滤后的数据
+    const filterList = list
+      .filter(item => !name || item.name.indexOf(name) >= 0)
+      .filter(item => [0, 1].includes(sex) ? item.sex === sex : true)
+    setTimeout(() => {
+      resolve({
+        list: filterList.slice((currPage - 1) * pageSize, currPage * pageSize),
+        totalCount: filterList.length
+      })
+    }, 300)
+  })
+}
+
+const DICT = {
+  SEX: [
+    { label: '男', value: 1 },
+    { label: '女', value: 0 }
+  ]
+}
+
+export default {
+  data() {
+    return {
+      params: {
+        id: 'A1918892818'
+      },
+      ITEMS: [
+        {
+          label: '姓名',
+          name: 'name',
+          type: 'input'
+        },
+        {
+          label: '性别',
+          name: 'sex',
+          type: 'select',
+          options: DICT.SEX
+        }
+      ],
+      COLUMNS: [
+        { type: 'index', label: '序号', width: '80px' },
+        { label: '姓名', prop: 'name', minWidth: '160px' },
+        { label: '年龄', prop: 'age', width: '100px' },
+        { label: '性别', prop: 'sex', type: 'enum', enums: DICT.SEX, 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-search-table
+    title="用户列表"
+    :request="{ api: apiMock, params }"
+    :form-items="ITEMS"
+    :table-columns="COLUMNS"
+    @before-request="onBeforeRequest"
+  >
+    <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-search-table>
+</template>
+
+<script>
+const apiMock = (params) => {
+  return new Promise((resolve, reject) => {
+    const { name, sex, currPage, pageSize } = params
+    // 总数据
+    const list = [
+      { 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', lsex: 1,ocation: '终南山' }
+    ]
+    // 过滤后的数据
+    const filterList = list
+      .filter(item => !name || item.name.indexOf(name) >= 0)
+      .filter(item => [0, 1].includes(sex) ? item.sex === sex : true)
+    setTimeout(() => {
+      resolve({
+        list: filterList.slice((currPage - 1) * pageSize, currPage * pageSize),
+        totalCount: filterList.length
+      })
+    }, 300)
+  })
+}
+
+const DICT = {
+  SEX: [
+    { label: '男', value: 1 },
+    { label: '女', value: 0 }
+  ]
+}
+
+export default {
+  data() {
+    return {
+      params: {
+        id: 'A1918892818'
+      },
+      ITEMS: [
+        {
+          label: '姓名',
+          name: 'name',
+          type: 'input'
+        },
+        {
+          label: '性别',
+          name: 'sex',
+          type: 'select',
+          options: DICT.SEX
+        }
+      ],
+      COLUMNS: [
+        { type: 'index', label: '序号', width: '80px' },
+        { label: '姓名', prop: 'name', minWidth: '160px' },
+        { label: '年龄', prop: 'age', width: '100px' },
+        { label: '性别', prop: 'sex', type: 'enum', enums: DICT.SEX, width: '100px' },
+        { label: '籍贯', prop: 'location', minWidth: '280px' },
+        { label: '操作', prop: 'operate', type: 'slot', fixed: 'right', align: 'right', width: '100px' }
+      ]
+    }
+  },
+
+  methods: {
+    apiMock,
+
+    /**
+     * 接口请求前修改参数
+     * @param  {Object} params 接口请求入参
+     */
+    onBeforeRequest(params) {
+      params.key1 = 'value1'
+      console.log('onBeforeRequest: ', params)
+    },
+
+    /**
+     * 删除指定行
+     * @param  {Object} row 当前行数据
+     */
+    onDelete(row) {
+      this.dataSource = this.dataSource.filter(item => item !== row)
+    }
+  }
+}
+</script>
+```
+:::
+
+
+## 操作栏
+
+::: demo
+```html
+<template>
+  <iov-pro-search-table
+    title="用户列表"
+    :request="{ api: apiMock, params }"
+    :form-items="ITEMS"
+    :table-columns="COLUMNS"
+  >
+    <template #action-bar>
+      <el-button type="primary" round icon="iov-icon-plus">新增用户</el-button>
+    </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-search-table>
+</template>
+
+<script>
+const apiMock = (params) => {
+  return new Promise((resolve, reject) => {
+    const { name, sex, currPage, pageSize } = params
+    // 总数据
+    const list = [
+      { 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', lsex: 1,ocation: '终南山' }
+    ]
+    // 过滤后的数据
+    const filterList = list
+      .filter(item => !name || item.name.indexOf(name) >= 0)
+      .filter(item => [0, 1].includes(sex) ? item.sex === sex : true)
+    setTimeout(() => {
+      resolve({
+        list: filterList.slice((currPage - 1) * pageSize, currPage * pageSize),
+        totalCount: filterList.length
+      })
+    }, 300)
+  })
+}
+
+const DICT = {
+  SEX: [
+    { label: '男', value: 1 },
+    { label: '女', value: 0 }
+  ]
+}
+
+export default {
+  data() {
+    return {
+      params: {
+        id: 'A1918892818'
+      },
+      ITEMS: [
+        {
+          label: '姓名',
+          name: 'name',
+          type: 'input'
+        },
+        {
+          label: '性别',
+          name: 'sex',
+          type: 'select',
+          options: DICT.SEX
+        }
+      ],
+      COLUMNS: [
+        { type: 'index', label: '序号', width: '80px' },
+        { label: '姓名', prop: 'name', minWidth: '160px' },
+        { label: '年龄', prop: 'age', width: '100px' },
+        { label: '性别', prop: 'sex', type: 'enum', enums: DICT.SEX, 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-search-table
+    title="用户列表"
+    :request="{ api: apiMock, params }"
+    :form-items="ITEMS"
+    :table-columns="COLUMNS"
+  >
+    <template #action-bar>
+      <el-button type="primary" round icon="iov-icon-plus">新增用户</el-button>
+    </template>
+    <template #operate="{ row }">
+      <iov-pro-link-group>
+        <el-link type="primary">编辑</el-link>
+        <el-link type="primary">删除</el-link>
+      </iov-pro-link-group>
+    </template>
+  </iov-pro-search-table>
+</template>
+
+<script>
+const apiMock = (params) => {
+  return new Promise((resolve, reject) => {
+    const { name, sex, currPage, pageSize } = params
+    // 总数据
+    const list = [
+      { 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', lsex: 1,ocation: '终南山' }
+    ]
+    // 过滤后的数据
+    const filterList = list
+      .filter(item => !name || item.name.indexOf(name) >= 0)
+      .filter(item => [0, 1].includes(sex) ? item.sex === sex : true)
+    setTimeout(() => {
+      resolve({
+        list: filterList.slice((currPage - 1) * pageSize, currPage * pageSize),
+        totalCount: filterList.length
+      })
+    }, 300)
+  })
+}
+
+const DICT = {
+  SEX: [
+    { label: '男', value: 1 },
+    { label: '女', value: 0 }
+  ]
+}
+
+export default {
+  data() {
+    return {
+      params: {
+        id: 'A1918892818'
+      },
+      ITEMS: [
+        {
+          label: '姓名',
+          name: 'name',
+          type: 'input'
+        },
+        {
+          label: '性别',
+          name: 'sex',
+          type: 'select',
+          options: DICT.SEX
+        }
+      ],
+      COLUMNS: [
+        { type: 'index', label: '序号', width: '80px' },
+        { label: '姓名', prop: 'name', minWidth: '160px' },
+        { label: '年龄', prop: 'age', width: '100px' },
+        { label: '性别', prop: 'sex', type: 'enum', enums: DICT.SEX, width: '100px' },
+        { label: '籍贯', prop: 'location', minWidth: '280px' },
+        { label: '操作', prop: 'operate', keepInPlace: true, type: 'slot', fixed: 'right', align: 'right', width: '100px' }
+      ]
+    }
+  },
+
+  methods: {
+    apiMock
+  }
+}
+</script>
+```
+:::
+
+
+## 搜索栏最大折叠行数
+默认超过2行开始折叠
+
+::: demo
+```html
+<template>
+  <iov-pro-search-table
+    title="用户列表"
+    :request="{ api: apiMock, params }"
+    :form-items="ITEMS"
+    :table-columns="COLUMNS"
+  >
+    <template #action-bar>
+      <el-button type="primary" round icon="iov-icon-plus">新增用户</el-button>
+    </template>
+    <template #operate="{ row }">
+      <iov-pro-link-group>
+        <el-link type="primary">编辑</el-link>
+        <el-link type="primary">删除</el-link>
+      </iov-pro-link-group>
+    </template>
+  </iov-pro-search-table>
+</template>
+
+<script>
+const apiMock = (params) => {
+  return new Promise((resolve, reject) => {
+    const { name, sex, currPage, pageSize } = params
+    // 总数据
+    const list = [
+      { 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', lsex: 1,ocation: '终南山' }
+    ]
+    // 过滤后的数据
+    const filterList = list
+      .filter(item => !name || item.name.indexOf(name) >= 0)
+      .filter(item => [0, 1].includes(sex) ? item.sex === sex : true)
+    setTimeout(() => {
+      resolve({
+        list: filterList.slice((currPage - 1) * pageSize, currPage * pageSize),
+        totalCount: filterList.length
+      })
+    }, 300)
+  })
+}
+
+const DICT = {
+  SEX: [
+    { label: '男', value: 1 },
+    { label: '女', value: 0 }
+  ],
+  STATUS: [
+    { label: '启用', value: 1 },
+    { label: '停用', value: 0 }
+  ]
+}
+
+export default {
+  data() {
+    return {
+      params: {
+        id: 'A1918892818'
+      },
+      ITEMS: [
+        {
+          label: '姓名',
+          name: 'name',
+          type: 'input',
+          span: 8
+        },
+        {
+          label: '性别',
+          name: 'sex',
+          type: 'select',
+          options: DICT.SEX,
+          span: 8
+        },
+        {
+          label: '年龄',
+          name: 'age',
+          type: 'input',
+          span: 8
+        },
+        {
+          label: '籍贯',
+          name: 'location',
+          type: 'input',
+          span: 16
+        },
+        {
+          label: '状态',
+          name: 'status',
+          type: 'select',
+          span: 8,
+          options: DICT.STATUS
+        }
+      ],
+      COLUMNS: [
+        { type: 'index', label: '序号', width: '80px' },
+        { label: '姓名', prop: 'name', minWidth: '160px' },
+        { label: '年龄', prop: 'age', width: '100px' },
+        { label: '性别', prop: 'sex', type: 'enum', enums: DICT.SEX, width: '100px' },
+        { label: '籍贯', prop: 'location', minWidth: '280px' },
+        { label: '操作', prop: 'operate', keepInPlace: true, type: 'slot', fixed: 'right', align: 'right', width: '100px' }
+      ]
+    }
+  },
+
+  methods: {
+    apiMock
+  }
+}
+</script>
+```
+:::
+
+## 设置一行折叠
+
+::: demo
+```html
+<template>
+  <iov-pro-search-table
+    title="用户列表"
+    :request="{ api: apiMock, params }"
+    :form-items="ITEMS"
+    :table-columns="COLUMNS"
+    :config="{ form: { maxLine: 1 } }"
+  >
+    <template #action-bar>
+      <el-button type="primary" round icon="iov-icon-plus">新增用户</el-button>
+    </template>
+    <template #operate="{ row }">
+      <iov-pro-link-group>
+        <el-link type="primary">编辑</el-link>
+        <el-link type="primary">删除</el-link>
+      </iov-pro-link-group>
+    </template>
+  </iov-pro-search-table>
+</template>
+
+<script>
+const apiMock = (params) => {
+  return new Promise((resolve, reject) => {
+    const { name, sex, currPage, pageSize } = params
+    // 总数据
+    const list = [
+      { 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', lsex: 1,ocation: '终南山' }
+    ]
+    // 过滤后的数据
+    const filterList = list
+      .filter(item => !name || item.name.indexOf(name) >= 0)
+      .filter(item => [0, 1].includes(sex) ? item.sex === sex : true)
+    setTimeout(() => {
+      resolve({
+        list: filterList.slice((currPage - 1) * pageSize, currPage * pageSize),
+        totalCount: filterList.length
+      })
+    }, 300)
+  })
+}
+
+const DICT = {
+  SEX: [
+    { label: '男', value: 1 },
+    { label: '女', value: 0 }
+  ],
+  STATUS: [
+    { label: '启用', value: 1 },
+    { label: '停用', value: 0 }
+  ]
+}
+
+export default {
+  data() {
+    return {
+      params: {
+        id: 'A1918892818'
+      },
+      ITEMS: [
+        {
+          label: '姓名',
+          name: 'name',
+          type: 'input',
+          span: 8
+        },
+        {
+          label: '性别',
+          name: 'sex',
+          type: 'select',
+          options: DICT.SEX,
+          span: 8
+        },
+        {
+          label: '年龄',
+          name: 'age',
+          type: 'input',
+          span: 8
+        },
+        {
+          label: '籍贯',
+          name: 'location',
+          type: 'input',
+          span: 16
+        },
+        {
+          label: '状态',
+          name: 'status',
+          type: 'select',
+          span: 8,
+          options: DICT.STATUS
+        }
+      ],
+      COLUMNS: [
+        { type: 'index', label: '序号', width: '80px' },
+        { label: '姓名', prop: 'name', minWidth: '160px' },
+        { label: '年龄', prop: 'age', width: '100px' },
+        { label: '性别', prop: 'sex', type: 'enum', enums: DICT.SEX, width: '100px' },
+        { label: '籍贯', prop: 'location', minWidth: '280px' },
+        { label: '操作', prop: 'operate', keepInPlace: true, type: 'slot', fixed: 'right', align: 'right', width: '100px' }
+      ]
+    }
+  },
+
+  methods: {
+    apiMock
+  }
+}
+</script>
+```
+:::
+
+## 无需折叠
+
+::: demo
+```html
+<template>
+  <iov-pro-search-table
+    title="用户列表"
+    :request="{ api: apiMock, params }"
+    :form-items="ITEMS"
+    :table-columns="COLUMNS"
+    :config="{ form: { collapse: false } }"
+  >
+    <template #action-bar>
+      <el-button type="primary" round icon="iov-icon-plus">新增用户</el-button>
+    </template>
+    <template #operate="{ row }">
+      <iov-pro-link-group>
+        <el-link type="primary">编辑</el-link>
+        <el-link type="primary">删除</el-link>
+      </iov-pro-link-group>
+    </template>
+  </iov-pro-search-table>
+</template>
+
+<script>
+const apiMock = (params) => {
+  return new Promise((resolve, reject) => {
+    const { name, sex, currPage, pageSize } = params
+    // 总数据
+    const list = [
+      { 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', lsex: 1,ocation: '终南山' }
+    ]
+    // 过滤后的数据
+    const filterList = list
+      .filter(item => !name || item.name.indexOf(name) >= 0)
+      .filter(item => [0, 1].includes(sex) ? item.sex === sex : true)
+    setTimeout(() => {
+      resolve({
+        list: filterList.slice((currPage - 1) * pageSize, currPage * pageSize),
+        totalCount: filterList.length
+      })
+    }, 300)
+  })
+}
+
+const DICT = {
+  SEX: [
+    { label: '男', value: 1 },
+    { label: '女', value: 0 }
+  ],
+  STATUS: [
+    { label: '启用', value: 1 },
+    { label: '停用', value: 0 }
+  ]
+}
+
+export default {
+  data() {
+    return {
+      params: {
+        id: 'A1918892818'
+      },
+      ITEMS: [
+        {
+          label: '姓名',
+          name: 'name',
+          type: 'input',
+          span: 8
+        },
+        {
+          label: '性别',
+          name: 'sex',
+          type: 'select',
+          options: DICT.SEX,
+          span: 8
+        },
+        {
+          label: '年龄',
+          name: 'age',
+          type: 'input',
+          span: 8
+        },
+        {
+          label: '籍贯',
+          name: 'location',
+          type: 'input',
+          span: 16
+        },
+        {
+          label: '状态',
+          name: 'status',
+          type: 'select',
+          span: 8,
+          options: DICT.STATUS
+        }
+      ],
+      COLUMNS: [
+        { type: 'index', label: '序号', width: '80px' },
+        { label: '姓名', prop: 'name', minWidth: '160px' },
+        { label: '年龄', prop: 'age', width: '100px' },
+        { label: '性别', prop: 'sex', type: 'enum', enums: DICT.SEX, width: '100px' },
+        { label: '籍贯', prop: 'location', minWidth: '280px' },
+        { label: '操作', prop: 'operate', keepInPlace: true, type: 'slot', fixed: 'right', align: 'right', width: '100px' }
+      ]
+    }
+  },
+
+  methods: {
+    apiMock
+  }
+}
+</script>
+```
+:::
+
+
+## 简易模式
+
+::: demo
+```html
+<template>
+  <iov-pro-search-table
+    title="用户列表"
+    :request="{ api: apiMock, params }"
+    :form-items="ITEMS"
+    :table-columns="COLUMNS"
+    :config="{ simple: true }"
+  >
+    <template #action-bar>
+      <el-button type="primary" round icon="iov-icon-plus">新增用户</el-button>
+    </template>
+    <template #operate="{ row }">
+      <iov-pro-link-group>
+        <el-link type="primary">编辑</el-link>
+        <el-link type="primary">删除</el-link>
+      </iov-pro-link-group>
+    </template>
+  </iov-pro-search-table>
+</template>
+
+<script>
+const apiMock = (params) => {
+  return new Promise((resolve, reject) => {
+    const { name, sex, currPage, pageSize } = params
+    // 总数据
+    const list = [
+      { 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', lsex: 1,ocation: '终南山' }
+    ]
+    // 过滤后的数据
+    const filterList = list
+      .filter(item => !name || item.name.indexOf(name) >= 0)
+      .filter(item => [0, 1].includes(sex) ? item.sex === sex : true)
+    setTimeout(() => {
+      resolve({
+        list: filterList.slice((currPage - 1) * pageSize, currPage * pageSize),
+        totalCount: filterList.length
+      })
+    }, 300)
+  })
+}
+
+const DICT = {
+  SEX: [
+    { label: '男', value: 1 },
+    { label: '女', value: 0 }
+  ]
+}
+
+export default {
+  data() {
+    return {
+      params: {
+        id: 'A1918892818'
+      },
+      ITEMS: [
+        {
+          label: '姓名',
+          name: 'name',
+          type: 'input'
+        },
+        {
+          label: '性别',
+          name: 'sex',
+          type: 'select',
+          options: DICT.SEX
+        }
+      ],
+      COLUMNS: [
+        { type: 'index', label: '序号', width: '80px' },
+        { label: '姓名', prop: 'name', minWidth: '160px' },
+        { label: '年龄', prop: 'age', width: '100px' },
+        { label: '性别', prop: 'sex', type: 'enum', enums: DICT.SEX, width: '100px' },
+        { label: '籍贯', prop: 'location', minWidth: '280px' },
+        { label: '操作', prop: 'operate', keepInPlace: true, type: 'slot', fixed: 'right', align: 'right', width: '100px' }
+      ]
+    }
+  },
+
+  methods: {
+    apiMock
+  }
+}
+</script>
+```
+:::
+
+
+## Attributes
+
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+| ------- | ------- | ------- | ------- | ------- |
+| title | 搜索表格的标题 | String | -  | - |
+| sub-title | 搜索表格的副标题 | String | -  | - |
+| request | 请求函数，详见下方 `Request` 配置 | Object | -  | - |
+| form-items | 表单项描述项配置，详见[配置](/components/pro-form.html#items-attributes) | Array | -  | - |
+| table-columns | 表格列描述项配置，详见[配置](/components/pro-table.html#column-attributes) | Array | - | - |
+| dataSource | 外部数据源，用于用于渲染表格的数据 | Array | - | - |
+| config | 搜索表格配置，用于配置表单/表格/分页器的展示，详见下方 Config 配置 | Object | - | - |
+
+## Request Attributes
+
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+| ------- | ------- | ------- | ------- | ------- |
+| api | 接口请求方法 | Function(params) | -  | - |
+| params | 接口请求入参 | Object | - | - |
+| reloadOnParamsChange | 当params发生变化，是否重新请求接口 | Boolean | - | true |
+| requiredFields | 接口请求必须的字段 | String/Array | - | - |
+| default | 接口没有加载成功前的默认值 | Array/Object | - | - |
+| threshold | 接口请求的阈值间隔 | Number | - | 50 |
+
+## Config Attributes
+
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+| ------- | ------- | ------- | ------- | ------- |
+| form | 表单配置，详见 [ProForm配置](/components/pro-form.html#config-attributes)，特殊配置详见下方 `FormConfig` 配置 | Object | -  | - |
+| table | 表格配置，详见 [ProTable 配置](/components/pro-table.html#config-attributes) | Object | - | - |
+| simple | 简易模式 | Boolean | - | - |
+
+## FormConfig Attributes
+
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+| ------- | ------- | ------- | ------- | ------- |
+| collapse | 是否折叠表单 | Boolean | -  | true |
+| maxLine | 最大折叠行数 | Number | - | 2 |
+
+## SearchTable Events
+事件包含 [Element原生Table事件](https://element.eleme.cn/#/zh-CN/component/table#table-events) + [Element原生Pagination事件](https://element.eleme.cn/#/zh-CN/component/pagination#events)，特有的方法如下：
+| 事件名 | 说明 | 参数 |
+| ------- | ------- | ------- |
+| beforeRequest | 接口请求前参数拦截 | params |
+| afterRequest | 接口请求后获取返回值 | respData |
+
+## SearchTable Methods
+方法由[Element原生Table方法](https://element.eleme.cn/#/zh-CN/component/table#table-methods) + [Element原生Pagination方法](https://element.eleme.cn/#/zh-CN/component/pagination#events)组成。特有的方法如下：
+
+| 方法名 | 说明 | 参数 |
+| ------- | ------- | ------- |
+| onSearch | 刷新列表数据 | - |
+| refresh | 刷新当前页数据 | - |
+| onReset | 重置表单并刷新列表数据 | - |