初步使用Vue + Element体会

之前一直用Jquery 然后重点是后台数据库相关开发，虽然之前有了解过Vue，但是一直没在实际工作用到。最近正好有机会使用，结合饿了么，简单总结，方便之后使用。

安装/命令

工欲善其事，必先利其器！
开发工具用的是VS code
使用之前肯定是要配置一些环境。以及一些常用的创建项目打包启动的命令
这些都可以搜一下或者去菜鸟教程看一下，照着来一边。

模板/语法

毕竟是前端框架，第一步就是了解框架的结构模板是什么样子的，有什么，写什么，写在哪。

<template>
  <div></div>
  //内容 只能出现一次template关键字块
</template>
<script>

// 引入组件
import ucSearch from './components/Search.vue'
import ucGridView from './components/GridView.vue'

// 声明信息
export default {
    components: { ucSearch,ucGridView },
    data() {
      return {
      grid: { list: [], index: 1, size: 10, total: 0, query: {}, ids: [], loading: false }
    }
    },
    methods: {
       
    }
}
</script>
<style>
 //样式
</style>

样式

1.菜单标题

<div class="breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>销售管理</el-breadcrumb-item>
        <el-breadcrumb-item>线上卡册申请单</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
<style>
  .breadcrumb {
    background-color: rgb(245, 245, 245); 
    margin-top: -10px;
    margin-left: -10px;
    margin-right: -10px;
    margin-bottom: 10px;
    padding: 16px;
  }
</style>

2.行元素

 <el-row :gutter="15">
 gutter是指栅格间间隔，offset是指栅格左侧的间隔格数
  <el-col :span="8">
  span 应该是宽度间隔

3.form表单数据元素 ref validate resetFields

 <el-form ref="elForm" :model="Query" size="small" label-width="100px">

Vue 为简化DOM获取方法提出了ref 属性和$ refs 对象。

一般的操作流程是:ref 绑定控件，$refs 获取控件

submitForm() {
      this.$refs["elForm"].validate((valid) => {
        if (!valid) return;
        // TODO 提交表单
        this.grid.index = 1;
        this.search();
      });
    },
    resetForm() {
      this.$refs["elForm"].resetFields();
      this.Query.ApplyBeginDate="";
      this.Query.ApplyEndDate="";
      this.Query.CardType=null;
    },

调用validate()校验时，需要prop属性绑定校验项的字段名，如下所示，如果不绑定prop=“ApplyManName” 就不校验此项，如果是自定义规则 if else 一定都要写 不屑else 检验就不过去的

<el-form-item label="申请人" prop="ApplyManName">
              <el-input v-model="Query.ApplyManName" clearable></el-input>
            </el-form-item>

4. 输入框

<el-form-item label="大客户名称" prop="BigCustomerName">
              <el-input v-model="Query.BigCustomerName" clearable   @keyup.native="replace1"></el-input>
            </el-form-item>
 replace1(){
      if(this.cardnumberdata.StartNumber!=""&&this.cardnumberdata.StartNumber!="undefined")
      {
        
          this.cardnumberdata.StartNumber=this.cardnumberdata.StartNumber.replace(/\D/g,'');
      }
    },
clearable 属性是 输入内容后面出现 ❌清除用
keyup.native 是 输入及时校验验证

5. 下拉框

 <el-select v-model="Query.CardType" placeholder="请选择" 
                clearable
                :style="{ width: '40%' }"
                >
                <el-option
                  v-for="item in CardTypeList"
                  :key="item.Key"
                  :label="item.Value"
                  :value="item.Key"
                >
                </el-option>
              </el-select>

6.时间控件

  <el-date-picker
                v-model="Query.CreateTime"
                type="daterange"
                unlink-panels
                range-separator="To"
                start-placeholder="开始时间"
                end-placeholder="截止时间"
                format="yyyy-MM-dd"
                :shortcuts="shortcuts"
                :style="{ width: '100%' }"
              ></el-date-picker>
        //注意日期区间 model是绑定的一个数组       
 if (this.Query.Time != "") {
        var date1 = new Date(this.Query.Time[0]);
        var date2 = new Date(this.Query.Time[1]);
        var startTime =
          date1.getFullYear() +
          "-" +
          (date1.getMonth() + 1) +
          "-" +
          date1.getDate();
        var endTime =
          date2.getFullYear() +
          "-" +
          (date2.getMonth() + 1) +
          "-" +
          date2.getDate();
      }

7.按钮

  <el-button
                type="primary"
                icon="el-icon-search"
                @click="search"
                >开始查询</el-button
              >
              <el-button icon="el-icon-delete" @click="resetForm"
                >清空条件</el-button
              >

8.表格 展示列表

<el-table :data="grid.list" style="width: 100%">
<el-table-column prop="SysNo" label="编号" width="80"></el-table-column>
 <!-- 分页组件 -->
    <div class="pagination-custom">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="grid.index"
        :page-sizes="[10, 20, 30]"
        :page-size="grid.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="grid.total"
      >
      </el-pagination>
    </div>
.pagination-custom {
  text-align: left;
  background-color: rgb(245, 245, 245);
  padding: 5px;
  border: 1px solid #ebeef5;
  border-top: 0px;
 
}

9.单选按钮

  <el-form-item label="是否征税">
               <el-radio disabled v-model="formData.IsPayTaxes" :label="true">是</el-radio>
               <el-radio disabled v-model="formData.IsPayTaxes" :label="false">否</el-radio>
              </el-form-item>

10.弹出框

<el-dialog title="详情" :visible.sync="dialogVisible" width="60%">

10.超链接 a标签

<el-form-item label="附件信息">
               <div class="block" v-for="fit in AttachmentList" :key="fit.SysNo">
    <span class="demonstration">{{ fit.Name }}</span>
                   <a
                    :href="fit.Url"
                    target="_blank"
                   
                    :download="fit.Name"
                  >查看</a>
   
  </div>
              </el-form-item>

10.在表格里面 内容有条件显示不同内容 slot-scope

<el-table-column
           
            label="是否征税"
            align="center"
            min-width="100"
            
          >
          <template
          slot-scope="scope"
          
        >
          <span  v-if="scope.row.IsPayTaxes==true">是</span>
           <span v-else>否</span>
        </template>
      
          </el-table-column>

10.数组操作 场景：在页面层面操作显示 表格数组内容

需要知道1.添加往数组添加内容 2.删除找到具体信息删除

 <el-table 
          :data="cardnumberList"
          ref="multipleTable"
          @selection-change="handleSelectionChange"
         >
          <el-table-column
            type="selection"
            width="55"
            prop="SysNo"
          />


   //添加数组
 this.cardnumberList.push(res.value);
 //删除数组 通过方法来将选择内容映射multipleSelection
handleSelectionChange(val) {
   // 获取选中的 table中的数据
    this.multipleSelection = val;
 
    },
this.multipleSelection.forEach(t=>{
      
      this.cardnumberList.splice(this.cardnumberList.indexOf(t),1);
    })

10.重复div内容 思路 其实就是 相当于数组循环 只不过对象或多或少，里面的元素还是一样，可能根据一些下拉选择来确定v-if 的条件

<div class="group">
          <div
            v-for="(itemdata, index) in itemsInfo"
            v-bind:key="index"
            style="
              border: 1px solid #dcdfe6;
              padding: 15px;
              margin: 10px;
              border-radius: 12px;
            "
          >
          //下面就是一个个元素

 showChangge() {
      //广告位切换影响模板数量就对数组进行重置
      if (this.savedata.ProportionType == 1) {
        this.itemsInfo = [{}];
      } else if (this.savedata.ProportionType == 2) {
        this.itemsInfo = [{}, {}];
      } else if (this.savedata.ProportionType == 3) {
        this.itemsInfo = [{}, {}, {}];
      }
    },

10.图片上传 组件 uploadfile

 <!-- 图片配置 -->

              <el-row v-if="itemdata.JumpType">
                <el-col :span="3">
                  <el-form-item label="配置图片"> </el-form-item>
                </el-col>
                <el-col :span="24" style="margin-bottom: 15px">
                  <uc-upload-file
                    :ref="index"
                    v-model="itemdata.Image"
                  ></uc-upload-file>
                </el-col>
              </el-row>

info.Image = {
                /* 上传按钮显示名称 */
                btnlabel: "点击上传图片",
                /* 服务器目录 */
                pre: "erp/images/dic00001/",
                /* 0:上传ftp，1:上传七牛 2:上传七牛私有云*/
                uploadmode: 1,
                /* 单个文件限制大小(单位:kb) */
                maxsize: 300,
                /* 上传文.j件类型支持 */
                accepts: ".jpg,.png,.jpeg",
                /* 可多选文件 */
                multiple: false,
                /* 上传限制文件数量 */
                limit: 1,
                /* 对外输出只读文件列表 */
                // readOnlyFileList: [],
                fileList: [
                  {
                    url: info.ImageUrl,
                    name: info.ImageName,
                  },
                ],
                /* 文件列表显示模式, text:列表 picture: 图片列表 picture-card: 图片卡片 */
                mode: "picture",
                readOnly: this.readonly,
                lockwidth: checkWidth, //限制宽
                lockheight: checkHeight,//限制高
              };

11.多选框带样式

  <el-checkbox
                  :indeterminate="isIndeterminate"
                  v-model="Query.CheckAll"
                  @change="handleCheckAllChange"
                  >全选</el-checkbox
                >

                <el-checkbox-group
                  v-model="Query.SitesCodes"
                  @change="sitesCodesChangge"
                  style="margin-left: 10px"
                  fill="#1ab394"
                >
                  <el-checkbox-button
                    v-for="(item, index) in options"
                    :key="index"
                    :label="item.value"
                    >{{ item.label }}</el-checkbox-button
                  >
                </el-checkbox-group>

 sitesCodesChangge(value) {
 //选择自己 就看都选上了 把isIndeterminate  样式给ture
      let checkedCount = value.length;
      this.Query.CheckAll = checkedCount === this.options.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.Query.SitesCodes.length;
      //  console.log(value);
      console.log(this.Query.SitesCodes);
    },
    handleCheckAllChange(val) {
      //全选 就看val是ture/false 给到数组
      var allSiteCodes = [];
      for (let index = 0; index < this.options.length; index++) {
        const element = this.options[index];
        allSiteCodes.push(element.value);
      }
      this.Query.SitesCodes = val ? allSiteCodes : [];
      this.isIndeterminate = false;
    },