vue+element-ui后台管理项目实现用到的技术点

1.el-table表格数据渲染：
vue+element-ui实现简单增删改查流程:
通过后端接口返回数据渲染表格：el-table里props绑定data里返回字段名，lable设置表格渲染显示的表头标题

2.表格增删改查：
增：在data中命一个新增addForm对象，将addform中对应的新增键名通过 :model绑定到对应的input框，最后将
addform的值赋给后端需要的新增字段名项。
编辑和删除需要获取表格当前行
<template>
<el-button type="success" size="small" plain id="editBtn" @click="edit(scope.row)">编辑</el-button>
<el-button type="danger" size="small" plain id="delBtn" @click="del(scope.row.id)">删除</el-button>
</template>
删：通过scop获取当前需要删除的行的id来删除，通过接口将row.id传给后端即可删除
编辑：点击编辑按钮弹出框，在data中命一个editForm对象，将表格当前行的数据通过:model绑定到修改弹出框中，
将修改后的数据通过接口传给后端进行编辑。
查：将查询框通过:model绑定一个键名，最后将值传给后端进行搜索
3.前端页面需要通过后台传入的数字1,2,3显示不同的中文：、
可用element-ui里的formatter属性来格式化表格内容，如：
表格列绑定action函数
<el-table-column prop="diningAction" label="餐桌状态" :formatter="action"></el-table-column>


action(row) {
      if (row.diningAction == 0) {
        return '空闲'
      } else if (row.diningAction == 1) {
        return '用餐'
      } else {
        return '待打扫'
      }
    }
也可通过v-if来改变显示内容：
<el-table-column
       prop="diningAction"
       label="餐桌状态">
      <template slot-scope='scope'>
          <span v-if='scope.row.level === "0"'>空闲</span>
          <span v-else-if='scope.row.level === "1"'>用餐</span>
          <span v-else>待打扫</span>
        </template>
     </el-table-column>
如果改变内容只有两项，可用三元运算符进行条件渲染
4.页码及通过不同页获取数据和渲染数据

<el-pagination background
                     layout="prev, pager, next"
                     @current-change="handleCurrentChange"
                     :total="total"
                     class="paginationBar">
 </el-pagination>
通过element-ui的current-change可获得当前不同页码值，在handleCurrentChange方法中改变当前页码
currentPage,并将currentPage传给后端根据不同页获取数据。
方法：  //当前页码
   handleCurrentChange(val) {
     this.currentPage = val;
     if (this.isClick == -1) {
       this.search();
     } else {
       this.getDiningList()
     }

5.动态获取数据渲染el-select的option项

<el-select size="small" v-model="addValue" placeholder="请选择餐桌区域" style="width:100%">
   <el-option v-for="item in addForm.diningArea" :key="item.id" :label="item.diningAreaName"           :value="item.id"></el-option>
 </el-select>
data里命addValue:' ' 和diningArea:[]为空数组，并将后端返回值赋给diningArea，用v-for循环动态渲染option即可 注：如渲染默认显示数字，则需要转换我string类型,(tostring）
6.通过后端接口下载excel文件：

 downLoadTemplate() {      window.open(‘url’,"_self", "excel0fAccount")
    }
7.上传文件

 <form action="" ref="upload" name="dining">  
   <el-upload
    class="upload-demo"
  :action="URL"
    multiple
  :on-preview="handlePreview"
    :file-list="fileList"
  :on-success="uploadSuccess">
   <el-button size="small" type="primary">上传文件</el-button>  
</el-upload>
</form>