【VUE实战问题记录】前端实战项目工作笔记

1. el-button显示的时候，根据状态的不同进行判断

<template v-if="this.basicInfo.status === 2">
   <el-button type="danger" @click="invalid" class="btn">按钮01</el-button>
   <el-button type="primary" :loading="loading" @click="onConfirm" class="btn">按钮02</el-button>
</template>

2. 实现文字，然后弹窗提示日志信息，具体的详情内容，请以下面的代码为主

<el-button type="text" @click="log(basicInfo.id)" class="btn">查看日志</el-button>

// type 为后台固定的值
log(id, type = 1) {
      this.type = type
      this.serviceId = id
      this.$nextTick(() => {
        this.$refs.log.open()
      })
    },

3. 状态值的显示

<el-col :span="6">
          <dd>
            <span>XXX状态</span>
            <el-tooltip class="item" effect="dark" :content="data.status" placement="top">
              <!-- <span class="op">{{ data.status }}</span> -->
              <span v-if="data.status == 1">显示状态1</span>
              <span v-else-if="data.status == 2">显示状态2</span>
              <span v-else-if="data.status == 3">显示状态3</span>
            </el-tooltip>
          </dd>
        </el-col>

4. 给单号/编码等添加超链接，跳转至别的页面

<el-table-column
        prop="Code"
        label="单号"
        min-width="90"
        align="center"
        show-overflow-tooltip//为鼠标移动上去会有黑色弹窗冒泡
      >
        <template slot-scope="scope">
          <span class="jump" @click="jump(scope.row.Code)">
            {{ scope.row.Code }}</span
          >
        </template>
      </el-table-column>

// 跳转详情页
    jump(code) {
      jumpDetail(code, 'type')
    },

// 跳转至详情页
export function jumpDetail(code, type) {
  let path = null
  switch (type) {
    // 1页面
    case 'type-1': {
      path = '/111/222/details'
      break
    }
    // 打开详情
    case 'type-2': {
      path = '/111/222/carrayOver'
      break
    }
    default: {
      break
    }
  }
  const { href } = router.resolve({
    name: path,
    query: {
      code: code,
    },
  })
  window.open(href, '_blank')
}

5. 对获取到的数字以%比的方式显示

布局中为以下：

<el-table-column
        prop="numberCode"
        label="占比"
        min-width="100"
        align="center"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span>{{ Change(scope.row.numberCode) }}</span>
        </template>
      </el-table-column>

方法：

Change(number) {
      let number1 = (number* 100).toFixed(2) + '%'
      return number1
},

6.关闭当前页面，并延迟三秒钟

import { Message } from 'element-ui'
let timer = null
export const delayClose = (tips) => {
  timer = null
  window.clearTimeout(timer)
  return new Promise((res) => {
    Message.success(tips || '成功')
    timer = setTimeout(() => {
      res(true)
      window.close()
    }, 2000)
  })
}
//立马关闭页面
export function closeWindow() {
  window.opener = null
  window.open('', '_self')
  window.close()
}

用法

import { delayClose } from '@/views/utils/delayClose'

 // 关闭-
 close() {
   delayClose('关闭成功')
 },

7.对显示的数据进行两位小数点格式化

布局中用法

<el-table-column prop="jine" label="金额" align="center" min-width="8%">
    <template slot-scope="{ row }">
      <span>{{ formatNumber(row.jine) }}</span>
    </template>
</el-table-column>

方法

    // 金额两位小数格式化
formatNumber(amount) {
  if (amount === '' || amount == null || isNaN(amount)) {
     return '--'
  } else {
    if (amount || amount === 0) {
       amount = amount.toFixed(2)
    }
  }
   return amount
 },