Vue s-table中loadData的使用以及返回[[PromiseResult]]后值的获取

刚接触Vue，记录一个小问题， 项目使用的框架是Ant Design Pro of Vue

loadData是在table中使用的，用来绑定数据，重点是异步，即Promise的使用，相关代码如下：

  <-- 表格的使用 -->
    <s-table
      ref="table"
      size="default"
      :columns="columns"
      :scroll="{ x: 1185,y:440}"
      :rowKey="(record) => record.id"
      :data="loadData"
      :rowSelection=" { selectedRowKeys: selectedRowKeys, onChange: onSelectChange } "
    >
    </s-table>

loadData数据的绑定

   // 原框架使用的方法
    data() {
      return {
        columns: [
          {
            title: '规则编号',
            dataIndex: 'no'
          },
          {
            title: '描述',
            dataIndex: 'description'
          },
          {
            title: '服务调用次数',
            dataIndex: 'callNo',
            sorter: true,
            needTotal: true,
            customRender: (text) => text + ' 次'
          },
          {
            title: '状态',
            dataIndex: 'status',
            needTotal: true
          },
          {
            title: '更新时间',
            dataIndex: 'updatedAt',
            sorter: true
          }
        ],
        // 查询条件参数
        queryParam: {},
        // 加载数据方法 必须为 Promise 对象，此方法是该框架原来用的方法
        loadData: parameter => {
          return this.$http.get('/service', {
            params: Object.assign(parameter, this.queryParam)
          }).then(res => {
            return res.result
          })
        },
        selectedRowKeys: [],
        selectedRows: []
      }
    }

自己项目中使用的方法

// 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
         const params = Object.assign({}, parameter, {
          conditions: this.queryParams
        })
        return new Promise(resolve => {
        getAttendanceRuleList(params).then(res => {
          resolve({
           data: res.data.data
         })
        })
        })
      }

两种方法比较：

1.原来框架使用的是Vue中的http，this指向的是Vue实例，即this.$http.get()
然后通过then()拿到所需数据
2.现在所用的是：返回一个新的Promise实例化对象，通过resolve()返回所需数据
个人总结：重点是Promise，resolve()是Promise()内部的方法，then()是Promise()原型对象上的方法，所以这是目前的两种使用方式