vue集成Element组件--使用记录

一、安装及组装暂不考虑
基础vue页面的组成：

二、el语法记录
1.el-menu-item标签

<template v-for="(tt, key, index) in testItems">
              <el-menu-item
              :index="key" :key="index">
                <span slot="title">{
  { tt }}</span>
              </el-menu-item>
 </template>

其中：

属性	作用
:index	为v-bind:index用于动态绑定跳转url的，为必须项！
:key	为v-bind:key的作用主要是为了高效的更新虚拟DOM**。另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。(为了重新渲染虚拟DOM而定义的唯一id)

2.el-table和el-table-column标签

<el-table :data="testmesg.dataList">
        <el-table-column prop="testId" label="aaaa"></el-table-column>
        <el-table-column prop="testName" label="bbbb"></el-table-column>
</el-table>

属性	作用
:data	需要展示到table中的data数据，必须是一个可循环的list或数组
prop	当el-table元素中注入data对象数组后，在el-table-column中用prop属性来对应对象中的键名即可填入数据，用label属性来定义表格的列名。可以使用width属性来定义列宽。
label	table展示列的名称，如果tabledata为空，则展示表头行内容，如果tabledata不为空，则在展示表头行之后展示数据

如tabledata为空则展示：

如tabledata不为空，则展示

3.el-form-item多项展示成一行

<el-row>
            <el-col :span="8">
              <el-form-item prop="dczt" label="调出主体">
                <el-select v-model="dczt" :value="dczt" clearable filterable multiple>
                  <el-option v-for="(item, key) in dczt" :key="key" :label="item" :value="key"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="drzt" label="调入主体">
                <el-select v-model="drzt" :value="drzt" clearable filterable multiple>
                  <el-option v-for="(item, key) in drzt" :key="key" :label="item" :value="key"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
 </el-row>

4.el-select标签的使用–生成select下拉框
select可多选时，增加multiple属性即可！

<el-form-item prop="changeNum" label="调整单状态">
          <el-select v-model="query.empstatus" :value="query.empstatus" clearable filterable multiple>
            <el-option v-for="(item, key) in empStatus" :key="key" :label="item" :value="key"></el-option>
          </el-select>
</el-form-item>

上边的赋值方式，是empStatus是个数组或者list，循环展示！
另外：如果需要select加载已选中的值，如进入编辑页面会显示已选中的值，目前有两种方式：
(1)如果可获取到option需要的所有值，且系统不要求下拉中所有值都加载上，只需要显示出已选中的那条option即可使用如下方式：

<el-form-item :span="12" prop="organizationCode" label="人资架构">
            <el-select :value="editForm.organizationCode" :disabled="disabled" filterable remote :remote-method="changeOrg" @change="handleChangeOrg"
                       v-model="editForm.organizationCode" placeholder="人资架构">
              <el-option
                  v-for="item in organizationCodeList"
                  :key="item.organizationCode"
                  :label="item.organizationFullName"
                  :value="item.organizationCode">
              </el-option>
            </el-select>
</el-form-item>

data() {
	return {
		organizationCodeList: []
	}
},
watch: {
    row: {
      immediate: true,
      // handler中的val为返回的值
      handler(val) {
        this.handleInit(val)
      },
      deep: true
},
async handleInit(model) {
	console.log(model);
     // 人资机构
      this.editForm.organizationCode = model.organizationCode;
      this.editForm.organizationPath = model.organizationPath;
      // 进入编辑页面静态加载选中的一个option即可！
      this.organizationCodeList = [{
      	organizationCode: model.organizationCode, 	
      	organizationPath: model.organizationPath, 
      	organizationFullName: model.organizationName
      }];
}

这样编写，会在select下拉中增加organizationCodeList中下拉数据！为了把该option值选中，则需要el-select标签上 v-model的配合，设置v-model=“editForm.organizationCode”，则它会在option中查找:value="item.organizationCode"的值，所以手动设置value之后再利用v-model绑定，即可把选择的默认值显示出来！
(2)同样的，如果需要把下拉值都显示出来再选中某一个，参照(1)中v-model的方式，则只需要把organizationCodeList数据赋值上，再设置v-model为需要选中的value值即可！！

另外：
动态设置select下拉的是不是可选即动态增加disabled：
(1)从实际操作结果来看，在el-select上增加disabled="false"或者disabled="true"是不起作用的，最终得select都是置灰不可选的！！
(2)正确的使用方式是利用v-bind:disabled=“true” or v-bind:disabled="false"来动态给select下拉增加disabled属性----亲测有效！

<el-form-item label="单据类型" prop="orderType">
              <el-select v-model="applyUniform.orderType" :value="applyUniform.value" v-bind:disabled="disabledOrderType" clearable filterable>
                <el-option v-for="(item, index) in orderTypeList" :key="index" :label="item.name"
                           :value="item.value"></el-option>
              </el-select>
            </el-form-item>

export default {
	data() {
		return {
			disabledOrderType: false
		}
	}
}         

接下来在我们的方法中根据条件判断   disabledOrderType的值，动态赋值为false或者true即可！-----从传参结果看，即使增加上disabled=true，传参时依然可以把该参数传递到后台！

5.el-input标签的使用–生成input文本框

<el-form-item label="货主调整单号">
          <el-input v-model.trim="query.num"  maxLength="50"/>
</el-form-item>

6.el-date-picker标签的使用–生成日期插件
区间值插件：

<el-form-item prop="queryTime" label="计划时间">
          <el-date-picker
              v-model="query.queryTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
          </el-date-picker>
</el-form-item>

取值时，需要在data中定义日期属性值，由于有2个日期，因此下标为0的为开始日期，下标为1的为截止日期

import moment from 'moment/moment';
export default {
  name: 'OwnerChangeList',
  data() {
    return {
      // 调整单状态
      currentStatuList: [],
      // 仓库名称
      warehouseNameList: [],
      query: {
        adjustBillId: '',
        externalBillId: '',
        queryTime: '',
        currentStatus: [],
        warehouseCode: '',
        warehouseName: []
      },
      dataPage: {},
      currentPage: 0,
      pageSize: 10,
      shipperList: [],
      mainIdList: [],
      wmsList: [],
      msg: '无数据',
      createTimeRange: [],
      loading: false
    }
  },
  methods: {
    async searchOwnerChange(pageIndex = 0) {
      // 列表数据查询方法
      alert('searchOwnerChange');
      if (this.query.queryTime && this.query.queryTime.length > 0) {
        this.query.queryTimeStart = this.query.queryTime[0] ? moment(this.query.queryTime[0], 'YYYY-MM-DD HH:mm:ss').format('YYYY-MM-DD HH:mm:ss') : null
        this.query.endTimeStart = this.query.queryTime[1] ? moment(this.query.queryTime[1], 'YYYY-MM-DD HH:mm:ss').format('YYYY-MM-DD HH:mm:ss') : null
      } else {
        this.query.queryTimeStart = null
        this.query.endTimeStart = null
      }
      this.query.dataPage = pageIndex
      this.query.size = this.pageSize
    console.log(this.query.queryTimeStart);
     console.log(this.query.endTimeStart );
    }
  }
}

单个日期插件，当前日期之前的不可选：

重点关注：< :picker-options="expireTimeOption">
<el-date-picker v-model="checkForm.checkEndTime" type="date" end-placeholder="截止日期" clearable
                                :picker-options="expireTimeOption">
                            </el-date-picker>
data实现，当天前日期不可选：
data() {
    return {
	    expireTimeOption: {
	        disabledDate(date) {
	            //disabledDate 文档上：设置禁用状态，参数为当前日期，要求返回 Boolean
				// 当天前日期不可选，当天可选
	            return date.getTime() < Date.now() - 24 * 60 * 60 * 1000;
	            //如果需要当天及之前日期不可选
	            //return date.getTime() < Date.now();
	        }
	      }
    }
}                            

注意:如果后端设定的接收日期格式为：

spring.jackson.date-format=yyyy-MM-dd HH:mm:ss

则需要在在插件上value-format=“yyyy-MM-dd HH:mm:ss”，否则传值会报错

<el-date-picker v-model="checkForm.checkEndTime&#