时间戳格式化，导出函数，路由跳转，过滤器，单元格放多条数据

忘是亡心i 2022-11-17 13:43 20阅读 0赞

## 过滤器： ##

<el-table-column align="center" label="业务员等级" >
       <template slot-scope="scope">
         <span>{
       { scope.row.busLv | busLvFilter}}</span>
       </template>
    </el-table-column>

filters: {
        busLvFilter(busLv) {
          const busLvMap = {
            1: '合伙人',
            3: '至尊合伙人',
            2: '超级合伙人'
          }
          return busLvMap[busLv]
        }
      },

**v-if形式**

<el-table-column label="状态" align="center" >
         <template slot-scope="scope">
           <div v-if="scope.row.status == 0" class="text-warning">审核中</div>
           <div v-if="scope.row.status == 1" class="text-success">已核额</div>
           <div v-if="scope.row.status == 2" class="text-success">已放款</div>
         </template>
     </el-table-column>

## 时间戳格式化 ##

<el-table-column align="center" label="结算日期" >
      <template slot-scope="scope">
        <span>{
       {formatTime(scope.row.createTime)}}</span>
      </template>
    </el-table-column>

formatTime(date) {
          if(date!=null && date!=''){
            return parseTime(date)
          }else{
            return '-'
          }
        },

## 路由跳转 ##

<el-table-column label="操作" width="100" align="center">
    	<template slot-scope="scope">
    	<el-button type="text" size="mini" @click="$router.push({path: '/hixiaomo/subsidy/info', query:{id:scope.row.userId,createTime:scope.row.createTime}})" >关联订单</el-button>
    	</template>
    </el-table-column>

//详情页接收参数：
       this.urlParams.userId=this.$route.query.id;
       this.urlParams.createTime=this.$route.query.createTime;

//router中的js文件
        {
          path: 'subsidy',   
          name: '管理津贴查询',
          redirect: '/hixiaomo/subsidy/list',		//地址栏显示的url
          component: () => import('@/views/hixiaomo/index'),	//index文件是路由入口文件
          children: [
            {
              path: 'list',		//地址栏显示的url
              component: () => import('@/views/hixiaomo/subsidy'),		//显示的页面文件
              meta: { title: '管理津贴查询',activeMenu:'/hixiaomo/subsidy',roles:['promotionConfig'] },		//roles是权限
            },
            {
              path: 'info',
              name: '关联订单',
              hidden:true,
              component: () => import('@/views/hixiaomo/subsidyInfo'),
              meta: { title: '关联订单',activeMenu:'/hixiaomo/subsidy', }
            },
          ]
        },

## 表格单元格中放入多条信息 ##

<el-table-column align="center" label="借款人信息">
        <template slot-scope="scope">
          <div v-if="scope.row.borrowerInformation.companyName!=null" >借款企业：{
       {scope.row.borrowerInformation.companyName}}</div>
          <div v-if="scope.row.borrowerInformation.legalPhone!=null" >企业手机号：{
       {scope.row.borrowerInformation.legalPhone}}</div>
        </template>
    </el-table-column>

## 导出表格方法 ##

goExportTo() {
          let params=encodeParam(this.urlParams)+'&token='+getToken();
          let url=process.env.VUE_APP_BASE_API+'/user/gm/hxm/exportUser?';
          window.open(url+params)
        },