vue s-table与loadData使用

最新推荐文章于 2024-08-01 18:41:26 发布

Alohazym

最新推荐文章于 2024-08-01 18:41:26 发布

阅读量6.5k

点赞数 1

本文链接：https://blog.youkuaiyun.com/qq_41983336/article/details/109598836

版权

本文介绍了一种使用 loadData 方法从后台加载数据到表格的过程，并展示了如何通过 customRender 自定义单元格内容，包括日期格式化、违规时间范围显示及详细信息展示等高级功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.loadData

1.loadData从后台加载数据

loadData: parameter => {
  Object.assign(this.queryParam, parameter)
  return getVersionList(this.queryParam).then(resp => {
    return resp.data
  })
},
//Object.assign(this.queryParam, parameter)注意此函数用法

2.loadData加载从上个页面携带过来的数据

tableData:[],
loadData: parameter => {
    return new Promise(resolve => {
      resolve(this.tableData)
    }).then(res => {
    return {records:res}
    //return res
  })
}
// 用tableData在show()中接到上个页面传递过来的数据

s-table

<s-table
    rowKey="id"
    :columns="columns"
    :data="loadData"
    class="cbcs-table cbcs-table-ellipsis"
    size="middle"
>
</s-table>

// 主要注意customRender用法
columns: [
   {
     title: '序号',
     dataIndex: 'taxis',
     align: 'center',
     width: 60,
     customRender: function (text, record, index) {
       return (index + 1)
     }
   },
   {
     title: '版本号',
     dataIndex: 'version',
     align: 'center',
     width: 110
   },

  //调用函数
  {
     title: '违规时间',
     dataIndex: 'createTime',
     align: 'center',
  	 width: 100,
     customRender: (text) => this.$util.date.formatNumber(text, 'YYYY-MM-DD', false)
   },
   {
     title: '违规影响期',
     dataIndex: 'startTimeInt',
     align: 'center',
     width: 200,
     customRender: (text,record) => record.startTime +"-"+record.endTime
   },
   
   //点击事件
   {
     title: '详情',
     dataIndex: 'action',
     width: 80,
     align: 'center',
     fixed: 'right',
     scopedSlots: { customRender: 'action' }
   },
   // 页面上接收
    <a
     slot="action"
     slot-scope="text, record"
     href="javascript:void(0);"
     @click="preview(record)">详情</a>

  //调用函数，做更加详细的操作
  {
  	title: '说明',
    dataIndex: 'detail',
    customRender:(text,record)=>this.translateDetail(text,record)
  }
]，
//methods中定义函数translateDetail(text,record)，做进一步操作
translateDetail(text,record){
      switch (record.problemType) {
        case "entry":
        //this.$options.filters['NumToUnitNum']在方法中调用的main.js中的过滤器NumToUnitNum
          text="中标项目"+record.bidName+"，中标价格"+this.$options.filters['NumToUnitNum'](record.bidderBudgetMoney)+this.$options.filters['GetUnit'](record.bidderBudgetMoney)+",成交价为预算价的"+((record.bidderBudgetMoney/record.budgetMoney)*100).toFixed(2)+"%";
       break;
       ...
   }
   return text;
}