Vue前端项目-用户管理-显示用户列表(下)

目录

1、表格中添加这三列

2、导入elementui组件

3、全局挂载解析日期的处理方法

4、日期处理方法

---

实现效果: 

 

1、表格中添加这三列

在 src / views / system / user / index.vue 中的 el-table 表格添加

2、导入elementui组件

在 src / plugins / element.js 文件中,导入 Switch 组件

import { Switch } from 'element-ui'

Vue.use(Switch)

3、全局挂载解析日期的处理方法

在 src / main.js 文件中,挂载日期函数处理方法

import { addDateRange, parseTime } from '@/utils/ruoyi'

Vue.prototype.parseTime = parseTime

4、日期处理方法

在 src / utils / ruoyi.js 文件中，添加日期格式化方法：

// 日期格式化
export function parseTime(time, pattern) {
  if (arguments.length === 0 || !time) {
    return null
  }
  const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
  let date
  if (typeof time === 'object') {
    date = time
  } else {
    if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
      time = parseInt(time)
    }
    if ((typeof time === 'number') && (time.toString().length === 10)) {
      time = time * 1000
    }
    date = new Date(time)
  }
  const formatObj = {
    y: date.getFullYear(),
    m: date.getMonth() + 1,
    d: date.getDate(),
    h: date.getHours(),
    i: date.getMinutes(),
    s: date.getSeconds(),
    a: date.getDay()
  }
  const timeStr = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
    let value = formatObj[key]
    // Note: getDay() returns 0 on Sunday
    if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] }
    if (result.length > 0 && value < 10) {
      value = '0' + value
    }
    return value || 0
  })
  return timeStr
}