vue-admin 基础模板

校验规则

rules: {
  link: [{ required: true, message: 'link is required', trigger: 'change' }],
  timestamp: [{ type: 'date', required: true, message: 'timestamp is required', trigger: 'change' }],
  title: [{ required: true, message: 'title is required', trigger: 'blur' }]
},

v-if使用

<el-button v-if="scope.status!='deleted'" size="mini" type="danger" @click="fnDelete(scope)">

跳转到新页面

<el-table-column min-width="300px" label="Title">
  <template slot-scope="{row}">
    <router-link :to="'/example/edit/'+row.id" class="link-type">
      <span>{{ row.title }}</span>
    </router-link>
  </template>
</el-table-column>

input输入框

<el-form-item label="title">
    <el-input v-model="temp.title" placeholder="Please enter the content" />
</el-form-item>

textarea输入框

<el-form-item label="title">
    <el-input v-model="temp.desc" autosize :rows="3" type="textarea" class="article-textarea" placeholder="Please enter the content" />
</el-form-item>

number输入框

<el-form-item label="排序(越大越前)">
    <el-input-number v-model="temp.sort" :min="0" :max="1000000" label="排序" />
</el-form-item>

select标签

<el-col :span="10" offset="1">
  <el-form-item label-width="90px" label="性别">
      <el-select v-model="postForm.sex" placeholder="性别" clearable class="filter-item">
        <el-option v-for="(item, index) in sexOptions" :key="index+1" :label="item" :value="index+1" />
      </el-select>
  </el-form-item>
</el-col>

tag标签

<el-tag
    :type="scope.row.sex | filterType"
    effect="light">
    {{ scope.row.sex | filterSex }}
</el-tag>

filters:{
  filterType(re){
    if(re == 1){
      return ''
    }else if(re == 2){
      return 'danger'
    }else{
      return 'info'
    }
  },
  filterSex(re){
    if(re == 1){
      return '男'
    }else if(re == 2){
      return '女'
    }else{
      return '未知'
    }
  }
},

$message提示弹框

this.$message('aaaaaaaaa!')

this.$message.success('aaaaaaaaa!')

this.$message.warning('aaaaaaaaa!')

this.$message.error('aaaaaaaaa!')

const $message = this.$message({
    message: '  Compiling the theme',
    customClass: 'theme-message',
    type: 'success',
    duration: 0,
    iconClass: 'el-icon-loading'
})

setTimeout(function(){
    $message.close()
},2000)

上传组件TMupload

import TMupload from '@/components/TMupload'

components: { TMupload },

<el-form-item label-width="0">
  <TMupload :imgsrc.sync="temp.img" tips="图片(建议尺寸600*800)" id="img">
  </TMupload>
</el-form-item>

// 继续处理data和resetTemp中的this.temp.img = ''

富文本Tinymce

import Tinymce from '@/components/Tinymce'

components: { Tinymce },

<el-dialog id="firstDialog" width="1000px" :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
    <el-form-item label="content:">
        <tinymce ref="tinymceid" v-model="temp.content" :width="600" :height="300" />
    </el-form-item>    
</el-dialog>

// 需设置data的continueTime: 0，不是data.temp的continueTime
handleUpdate(row) {
  this.temp = Object.assign({}, row)
  this.temp.table = 'case'
  this.dialogStatus = 'update'
  this.dialogFormVisible = true
  this.$nextTick(() => {
    this.fnSetZindex()
    this.$refs['dataForm'].clearValidate()
    if(this.continueTime > 0){
      this.$refs['tinymceid'].setContent(this.temp.content)
    }
    this.continueTime++
  })
},

fnSetZindex() {
  var firstDialog = document.getElementById('firstDialog')
  setTimeout(function(){
    // 设置为较高的值，防止富文本上传时遮罩混乱
    firstDialog.style.zIndex = 3000
  },0)
}

分页组件Pagination

import Pagination from '@/components/Pagination'

components: { Pagination },

<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="fetchData" />

// 再单独处理total，listQuery，fetchData等
listQuery: {
    page: 1,
    limit: 10,
    table: 'case',
},

删除按钮提示框

<template slot-scope="scope">
  <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">
    修改
  </el-button>
  <el-button size="mini" type="danger" @click="fnDelete(scope.row)">
    删除
  </el-button>
</template>

fnDelete(row) {
  this.$confirm('此操作将永久删除, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    this.listLoading = true
    var deleteObj = {}
    deleteObj.id = row.id
    deleteObj.table = 'case'
    deleteOne(deleteObj).then((response) => {
      for (const v of this.list) {
        if (v.id === row.id) {
          const index = this.list.indexOf(v)
          this.list.splice(index, 1)
          break
        }
      }
      this.$message.success('删除成功!')
      this.listLoading = false
    })
  }).catch(() => {
    
  });
},

条件搜索框在template的.app-container 的.app-container下添加

输入搜索框

<el-input v-model="listQuery.device_id" placeholder="设备编码(支持模糊搜索)" clearable style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />

选择搜索框

<el-select v-model="listQuery.pay_status" placeholder="付款状态" clearable style="width: 160px" class="filter-item">
  <el-option v-for="(item, index) in statusOptions" :key="index" :label="item" :value="index" />
</el-select>

日期选择框

<div class="block filter-item">
  <el-date-picker
    v-model="listQuery.create_time"
    type="daterange"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    value-format="yyyy-MM-dd HH:mm:ss"
    :default-time="['00:00:00', '23:59:59']">
  </el-date-picker>
</div>

搜索按钮

<el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
  搜索
</el-button>

搜索时页码归1

handleFilter() {
  this.listQuery.page = 1
  this.fetchData()
},

data中定义

statusOptions:['未付款','已付款'],

listQuery中定义

create_time: undefined,

无需重新定义搜索方法直接调用fetchData即可

icon引用，icon-class为icons/svg文件夹下的svg文件名称，custom-class可自定义样式

<svg-icon icon-class="example"  class-name='custom-class' />

导出excel

在搜索按钮后面添加“导出excel”按钮

<el-button class="filter-item" :loading="downloadLoading" type="primary" icon="el-icon-document" @click="handleDownload">
    导出excel
</el-button>

data中return默认值

downloadLoading: false,

methods方法定义

handleDownload() {
  this.downloadLoading = true
  var myDate = new Date();
  var filename = myDate.getFullYear() + '-' + parseInt(myDate.getMonth() + 1) + '-' + myDate.getDate();
  import('@/vendor/Export2Excel').then(excel => {
    const tHeader = ['Id', '设备号', '用户', '价格', '时长', '状态', '创建时间']
    const filterVal = ['id', 'device_id', 'user_name', 'price', 'total_time', 'pay_status', 'create_time']
    const list = this.list
    const data = this.formatJson(filterVal, list)
    console.log(data)
    excel.export_json_to_excel({
      header: tHeader,
      data,
      filename: filename,
      autoWidth: true,
      bookType: 'xlsx'
    })
    this.downloadLoading = false
  })
},

有需要过滤的数据时循环过滤

formatJson(filterVal, jsonData) {
  return jsonData.map(v => filterVal.map(j => {
    if (j === 'timestamp') {
      return parseTime(v[j])
    } else {
      return v[j]
    }
  }))
},

确保src/vendor/Export2Excel.js存在且node_modules下存在file-saver和xlsx文件夹即可~