一、基础总结

1、构成

1）位置目录

如下图所示：
一个页面一个vue文件，位置在src下边的views里边；

如下图：
一个vue文件，对应一个或多个js文件，js放在src下边的api中；

2）页面组成

如图：一个vue，主要由和

template组件示例

template中又包含以下组成部分：
a、表单
放查询条件，格式可以参考下面代码

<el-form :model="this.queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
      <el-form-item label="用户名" prop="userName">
        <el-input
          v-model="queryParams.userName"
          placeholder="请输入用户名"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="申请编号" prop="applyId">
        <el-input
          v-model="queryParams.applyId"
          placeholder="请输申请编号"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="状态" prop="recordStat">
        <el-select v-model="queryParams.recordStat" placeholder="请选择状态" clearable>
          <el-option label="全部" value="0"></el-option>
          <el-option label="未传输" value="1"></el-option>
          <el-option label="传输失败" value="2"></el-option>
          <el-option label="已传输未申请" value="3"></el-option>
          <el-option label="已传输已申请" value="4"></el-option>
          <el-option label="已传输申请失败" value="5"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
      </el-form-item>
</el-form>

b、独立行
用来另起一行放一些按钮，并不是必要的，代码如下：

<el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button 
        type="primary" 
        plain 
        icon="el-icon-plus" 
        size="mini" 
        @click="handleImport"
        > 导入 </el-button>
      </el-col>
      <right-toolbar @queryTable="getList"></right-toolbar>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>

c、列表
放数据列表，包含多个列组件，代码如下：

<el-table v-loading="loading" :data="tableListData">
      <el-table-column type="index" width="100" label="序号" align="center"></el-table-column>
      <el-table-column label="申请编号" prop="applyId" width="200" align="center"/>
      <el-table-column label="用户id" prop="userId" width="200" align="center"/>
      <el-table-column label="用户名" prop="userName" width="200" align="center"/>
      <el-table-column label="卡号" prop="creditCardNo" width="200" align="center"/>
      <el-table-column label="卡密" prop="creditCardPwd" width="200" align="center"/>
      <el-table-column label="传输状态" width="200" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.transferStat==0" style="color:#000000">未传输</span>
					<span v-if="scope.row.transferStat==1" style="color:#00FF00">已传输</span>
          <span v-if="scope.row.transferStat==-1" style="color:#FF0000">传输失败</span>
        </template>
      </el-table-column>
      <el-table-column label="申请状态" prop="applyCreditStat" width="200" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.applyCreditStat==0" style="color:#000000">未申请</span>
					<span v-if="scope.row.applyCreditStat==1" style="color:#00FF00">已申请</span>
          <span v-if="scope.row.applyCreditStat==-1" style="color:#FF0000">申请失败</span>
        </template>
      </el-table-column>
</el-table>

d、分页
分页组件，代码如下：

<pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

script示例代码

<script>
import { applyCreditLogList } from "@/api/course/transferAndApply";
import { getToken } from "@/utils/auth";
export default {
  name: "ApplyCredit",
  data() {
    return {
      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题
        title: "申请用户导入",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/system/credit/uuApplyUserInfo?isModi=1"
      },

      showSearch: true,
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        userName: undefined,
        applyId: "",
        recordStat: "0",
      },
      total: 0,
      loading: false,
      tableListData: [],
      open: false,
      title: "",
      form: {},
    }
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      let formData = new FormData();
      formData.append('pageSize', this.queryParams.pageSize)
      formData.append('pageNum', this.queryParams.pageNum)
      if(this.queryParams.userName) formData.append('userName', this.queryParams.userName)
      if(this.queryParams.applyId) formData.append('applyId', this.queryParams.applyId)
      if(this.queryParams.recordStat) formData.append('recordStat', this.queryParams.recordStat)
      this.loading = true;
      applyCreditLogList(formData).then(response => {
        this.tableListData = response.records;
        this.total = response.total;
        this.loading = false;
      })
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    reset() {
      this.form = {
        name: "",
        sort: 0
      };
      this.resetForm("form");
    },
    /** 导入按钮操作 */
    handleImport() {
      this.upload.title = "用户导入";
      this.upload.open = true;
    },
    /** 下载模板操作 */
    importTemplate() {
      this.download('/system/credit/getTemplate/applyCredit', {
      }, `import_template_${new Date().getTime()}.xls`)
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
      this.getList();
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    }
  }
}
</script>

二、常用技巧补充

1、vue根据参数值不同，显示不同内容

<el-table-column label="传输状态" width="200" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.transferStat==0" style="color:#000000">未传输</span>
					<span v-if="scope.row.transferStat==1" style="color:#00FF00">已传输</span>
          <span v-if="scope.row.transferStat==-1" style="color:#FF0000">传输失败</span>
        </template>
</el-table-column>

其中template标签不能省略，其属性slot-scope="scope"是关键设置，设置完成后scope.row是固定搭配，取的是当前数据行；其后可取该行的所有字段。
还可以通过设置标签的style属性，给字体配置属性；color开头是配置字体颜色，background开头是配置背景颜色。
几种比较常用的颜色编码，其他的可以网上搜
白色 #FFFFFF
黑色 #000000
蓝色 #0000FF
红色 #FF0000
黄色 #FFFF00
绿色 #00FF00

2、