fetch-table

    1.0.91 • Public • Published

    fetch-table

    顾名思义,这是一个表格组件,与其它表格不同的地方在于它的渲染逻辑及业务逻辑都是通过拉取远程的表格配置数据进行操作的

    安装 install

    npm i fetch-table yarn add fetch-table

    基础用法

    main.js

    import fetchTable from 'fetch-table';
    import 'fetch-table/dist/fetch-table.css'
    Vue.use(fetchTable)
    <template>
      <div class="table-index-wrap">
        <fetch-table class="mt-30" table-key="配置列表" :request-options="requestOptions"></fetch-table>
      </div>
    </template>
    
    <script>
    export default {
      components: {
      },
      data() {
        return {
          requestOptions: {
            baseURL: process.env.VUE_APP_URL || '表格数据的API地址'
          }
        }
      },
      created() {
      },
      
    }
    </script>

    参数说明

    tableKey(String)

    获取配置数据的key,可理解为查询接口中的id

    configBaseUrl(String)

    获取列表配置数据的api地址

    requestParams(Object)

    自定义列表数据接口的请求参数

    requestOptions(Object)

    参数同axios的config参数,可以在此配置自己的请求设置

    例如

    {
      "baseURL": "https://www.demo.com",
      "timeout": "600000",
      "method": "POST",
      "params": ""
    }

    context(Object)

    指定组件调用的this对象

    immediately(Boolean)

    是否立刻加载列表数据

    request || response(Function)

    自定义请求request或响应response的方法

    <template>
        <fetch-table ref="table" class="mt-20" :immediately="true" :request-params="requestParams" config-base-url="https://jk.www.huishoubao.com/configApi" :request="onRequest" table-key="订单系统-闲鱼已验货售后订单列表"></fetch-table>
    </template>
    
    <script>
    import { getXyCheckAfterSaleList } from '@/api/api.js'
    export default {
      components: {
      },
      data() {
        return {
          form: {
            xyOrderNo: '',
            afterSaleNo: '',
            merchantGoodsNo: '',
            buyerName: '',
            buyerPhone: '',
            time: [],
            expressNo: '',
            imei: '',
            sn: '',
            refundStatus: '',
            needReturnGoods: ''
          },
        }
      },
      computed: {
        requestParams() {
          const { xyOrderNo, afterSaleNo, merchantGoodsNo, buyerName, buyerPhone, time, expressNo, imei, sn, refundStatus, needReturnGoods } = this.form
          return {
            xyOrderNo,
            afterSaleNo,
            merchantGoodsNo,
            buyerPhone,
            buyerName,
            createBeginTime: time[0] + ' 00:00:00',
            createEndTime: time[1] + ' 23:59:59',
            expressNo,
            imei,
            sn,
            refundStatus,
            needReturnGoods
          }
        }
      },
      methods: {
        onRequest(options) {
          return getXyCheckAfterSaleList(options.data)
        },
        onResponse(res) {
          return res.data.result
        }
      }
    }
    </script>
    

    summaryMethod

    列表尾部合计方法用法参考element-ui中的table文档

    spanMethod

    列和行的合并方法参考element-ui中的table文档

    Install

    npm i fetch-table

    DownloadsWeekly Downloads

    5

    Version

    1.0.91

    License

    MIT

    Unpacked Size

    668 kB

    Total Files

    34

    Last publish

    Collaborators

    • carrysxx