cutejava/cutejava-front/src/views/componentsDemo/advanced/CuteDynamicTableDemo.vue

<template>
  <div>
    <h4>何时使用</h4>
    <ul class="description">
      <li>展示结构化数据列表，并支持排序、分页、拖拽排序</li>
      <li>由后端统一返回前端所需的字段</li>
      <li>在使用过程中有任何问题，咨询 @Odboy（前端）@Odboy（后端）</li>
    </ul>
    <h4>基础用法</h4>
    <!-- 表格渲染 -->
    <!-- fetch: 获取远程数据 -->
    <!-- params-transform: 组装查询参数 -->
    <!-- responseTransform: 组装表格对象。对响应结果做处理 -->
    <!-- showSelect: 是否多选。不传默认false，传true为多选 -->
    <!-- @selection-change: 当且仅当mode为multi时启用 -->
    <!-- @order-change: 当排序字段被单击，el-table-column 需添加 sortable="custom" 属性 -->
    <cute-search-form :model="form" @search="handleSearch">
      <template v-slot:suffix>
        <el-form-item label="菜单标题" prop="blurry">
          <el-input v-model="form.blurry" clearable />
        </el-form-item>
      </template>
    </cute-search-form>
    <cute-dynamic-table
      ref="instance"
      :fetch="curd.fetch"
      :params-transform="curd.paramsTransform"
      show-select
    >
      <template v-slot:batchArea>
        <cute-button type="primary">批量绑定</cute-button>
      </template>
      <template v-slot:toolArea>
        <cute-button type="primary">导出</cute-button>
      </template>
      <template v-slot:operation>
        <el-table-column label="操作" width="150" min-width="150" fixed="right">
          <template v-slot="scope">
            <div>
              <el-button type="text" @click="onTableEditClick(scope.row)">编辑</el-button>
              <el-button type="text" @click="onTableDeleteClick(scope.row)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </template>
    </cute-dynamic-table>
    <h4>API</h4>
    <el-table :data="apiData">
      <el-table-column prop="name" label="参数" width="220" />
      <el-table-column prop="remark" label="说明" width="450" />
      <el-table-column prop="type" label="类型" />
      <el-table-column prop="defaultValue" label="默认值" />
      <el-table-column prop="required" label="是否必填" />
    </el-table>
    <h4>方法</h4>
    <el-table :data="methodData">
      <el-table-column prop="name" label="函数" width="220" />
      <el-table-column prop="remark" label="说明" width="450" />
      <el-table-column prop="inputArgs" label="入参" />
      <el-table-column prop="outArgs" label="出参" />
    </el-table>
  </div>
</template>
<script>
import FeatureCuteDynamicTableService from '@/api/features/cute-dynamic-table'
import CuteButton from '@/views/components/dev/CuteButton.vue'
import CuteDynamicTable from '@/views/components/advanced/CuteDynamicTable.vue'
import CuteSearchForm from '@/views/components/advanced/CuteSearchForm.vue'

export default {
  name: 'CuteDynamicTableDemo',
  components: { CuteSearchForm, CuteDynamicTable, CuteButton },
  data() {
    return {
      form: {
        blurry: ''
      },
      curd: {
        paramsTransform: (pageProps) => {
          const values = this.form
          return {
            page: pageProps.current,
            size: pageProps.pageSize,
            args: {
              ...values
            }
          }
        },
        fetch: async(queryParams) => {
          return FeatureCuteDynamicTableService.searchMenu2(queryParams)
        }
      },
      apiData: [
        { name: 'primary-key', remark: '对象中的哪个字段设置为主键', type: 'string', defaultValue: 'id', required: '否' },
        { name: 'fetch', remark: '请求数据的API接口', type: 'async(queryParams) => {}', defaultValue: '-', required: '否' },
        { name: 'paramsTransform', remark: '组装请求参数的方法', type: '(pageProps) => {}', defaultValue: '-', required: '否' },
        { name: 'responseTransform', remark: '组装响应结果的方法', type: '(response) => {}', defaultValue: '-', required: '否' },
        { name: 'showSelect', remark: '是否支持多选', type: 'boolean', defaultValue: 'false', required: '否' },
        { name: 'paging', remark: '是否显示分页组件', type: 'boolean', defaultValue: 'true', required: '否' },
        { name: 'pageProps', remark: '分页参数', type: 'object', defaultValue: '{current: 1,pageSize: 10,total: 0}', required: '否' },
        { name: 'customHeight', remark: '自定义高度', type: 'number', defaultValue: 'null', required: '否' },
        { name: 'selection-change', remark: '选中列表项发生改变的时候触发的回调', type: '(array) => {}', defaultValue: '-', required: '否' },
        { name: 'order-change', remark: '排序列发生改变的时候触发的回调。el-table-column 需添加 sortable="custom" 属性', type: '(column, orderType) => {}', defaultValue: '-', required: '否' },
        { name: 'page-change', remark: '分页数据发生改变的时候触发的回调', type: '(currentPage, pageSize) => {}', defaultValue: '-', required: '否' }
      ],
      methodData: [
        { name: 'getDataSource', remark: '获取当前表格的数据', inputArgs: '-', outArgs: 'array' },
        { name: 'refresh', remark: '刷新当前表格的数据，可以理解为重新执行查询方法。', inputArgs: '-', outArgs: '-' }
      ]
    }
  },
  mounted() {
    this.refreshData()
  },
  methods: {
    refreshData() {
      this.$refs.instance.refresh()
    },
    handleSearch() {
      this.$refs.instance.refresh()
    },
    onTableEditClick(row) {
      console.log('编辑', row)
    },
    onTableDeleteClick(row) {
      console.log('删除', row)
    }
  }
}
</script>
<style lang="scss" scoped>
ul {
  padding-left: 20px;
}
.description > li{
  font-size: 12px;
}
</style>