vscode中建议安装插件，更好提示 如 elemefe.vscode-element-helper

组件使用

Input 组件

  • 纯输入框 ```javascript oninput =”value=value.replace(/[^\d]/g,’’)” //只能输入数字 oninput =”value=value.replace(/[^0-9.]/g,’’)” //只能输入数字和小数

/ 元 

  2. - 结合form表单使用
  3. ```javascript
  4. <el-form ref="userform" rules="rules" :model="form" label-width="110px">
  5.     <el-row>
  6.         <el-form-item label="年龄：" prop="age">
  7.             <el-input v-model="form.age"></el-input>
  8.         </el-form-item>
  9.     </el-row>
  10. </el-form>
  12. rules:{
  13.   age:[
  14.     { required: true, message: '总容量不能为空', trigger: 'blur'},
  15.     {pattern: /^[0-9]*$/, message: '总容量需为数字', trigger: 'blur'}
  16.   ]
  17. }

注意：使用 v-model.number的问题

  1. <el-input
  2.  v-model.number='count'
  3.  type='number'
  4.  maxLength='9'
  5. />
  1. maxLength不生效
  2. 可以输入e
  3. 可以输入1.1…..11…1

价格验证示例

  1. <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
  2.    <el-form-item prop="allPayeeMoney">
  3.       <el-input 
  4.                 type="number" 
  5.                 step="0.01" 
  6.                 v-model="ruleForm.allPayeeMoney" 
  7.                 autocomplete="off">
  8.       </el-input>
  9.    </el-form-item>
  10. <el-form>
  11. data(){
  12.     return {
  13.      rules : {
  14.       yeeMoney: 
  15.        [{ required: true, 
  16.          message: '请填写正确的金额,保留两位小数',
  17.          pattern: /(^[\d]|^[1-9][\d]*)($|[\.][\d]{0,2}$)/}]
  18.      }        
  19. }

Form 组件

行内表单：
当选择将简单表单放置一行时

  1. <el-form :inline="true"> </el-form>

对齐方式（重要）
标签的对齐方式，最常见的场景如下 顶部对齐。之前的做法都是单独写span标签，不知道这个属性。
image.png

  1. <el-form :label-postion="top"></el-form>    //可选值 right left top

备注：当label-position 选项为top时，此时设置的label-width就不会生效了。

样式设置：
组件的宽度是按照外层盒子的宽度进行限制。 lable(输入框前面的标题) 宽度是按照 el-form 中设置 lable-width 宽度进行限制。

反馈图标

  1. <el-form status-icon></el-form>

验证触发
trigger: ‘blur’ 失去焦点，比如输入框里，检验文本框是否为空
trigger: ‘change’ 数据改变，需要手动选择的东西 (比如 select选择器 以及upload 上传图片 组件)

表单验证
Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可
注意：此处的 prop 经过测试发现，并非是传入prop的属性，而是整个 form 对象中对应的值。

自定义校验规则
注意:自定义规则中的callback 必须被调用。

动态增减表单项
除了在Form组件上一次性传递所有的验证规则外还可以在单个的表单域上传递属性的验证规则
查看官方的示例，发现是把 规则 写在 el-form-item 上，以达到动态验证的效果。

  1. <el-form-item
  2.     v-for="(domain, index) in dynamicValidateForm.domains"
  3.     :label="'域名' + index"
  4.     :key="domain.key"
  5.     :prop="'domains.' + index + '.value'"
  6.     :rules="{
  7.       required: true, message: '域名不能为空', trigger: 'blur'
  8.     }"
  9.   >
  10.     <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button>
  11.   </el-form-item>

注意：在增加表单的时候。prop绑定的值与添加到数组中的属性是保持一致的 

  1. addDomain() {
  2.     this.dynamicValidateForm.domains.push({
  3.       value: '',
  4.       key: Date.now()
  5.     });
  6.   }

表单内组件尺寸控制
通过设置 Form 上的 size 属性可以使该表单内所有可调节大小的组件继承该尺寸。Form-Item 也具有该属性。

  1. <el-form size="mini"></el-form>

表单其它操作
清空表单
https://blog.csdn.net/weixin_45393094/article/details/115584032

  1. // 更新补充 添加 nextTick ，不然会报错。保证dom已经渲染成功
  3. resetForm(formName) {
  4.     this.$nextTick(()=>{
  5.         this.$refs[formName].resetFields();
  6.     })                
  7. },

Table 组件

属性说明

stripe 是否为斑马纹 table
header-cell-style 表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。
highlight-current-row Table 组件提供了单选的支持，只需要配置highlight-current-row属性即可实现单选。
tree-props 渲染嵌套数据的配置选项
(树类型的数据的显示)
row-key 行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。
default-expand-all 是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效
selection-change 当选择项发生变化时会触发该事件

基本示例

  1.   <template>
  2.     <el-table
  3.       :data="tableData"
  4.       style="width: 100%">
  5.       <el-table-column
  6.         prop="date"
  7.         label="日期"
  8.         width="180">
  9.       </el-table-column>
  10.       <el-table-column
  11.         prop="name"
  12.         label="姓名"
  13.         width="180">
  14.       </el-table-column>
  15.       <el-table-column
  16.         prop="address"
  17.         label="地址">
  18.       </el-table-column>
  19.     </el-table>
  20.   </template>
  22.   <script>
  23.     export default {
  24.       data() {
  25.         return {
  26.           tableData: [{
  27.             date: '2016-05-02',
  28.             name: '王小虎',
  29.             address: '上海市普陀区金沙江路 1518 弄'
  30.           }, {
  31.             date: '2016-05-04',
  32.             name: '王小虎',
  33.             address: '上海市普陀区金沙江路 1517 弄'
  34.           }, {
  35.             date: '2016-05-01',
  36.             name: '王小虎',
  37.             address: '上海市普陀区金沙江路 1519 弄'
  38.           }, {
  39.             date: '2016-05-03',
  40.             name: '王小虎',
  41.             address: '上海市普陀区金沙江路 1516 弄'
  42.           }]
  43.         }
  44.       }
  45.     }
  46.   </script>

selection-change
image.png

设置表头居中

  1. <el-table
  2.   :data="tableData"
  3.   style="width: 100%"
  4.   :header-cell-style="{'text-align':'center'}"> //这里设置表头居中
  5. </el-table>

设置表格内容某一列样式

  1. <el-table
  2.   :data="tableData"
  3.   style="width: 100%"
  4.   :header-cell-style="{'text-align':'center'}"> //这里设置表头居中
  5.   <el-table-column
  6.     prop="date"
  7.     label="日期"
  8.     width="180" align="center" header-align="center">//这里设置第一列内容居中对齐
  9.   </el-table-column>
  10. </el-table>

设置表格内容某一行样式
image.png
需求场景：
某一行需要根据状态有特定的样式；
一个列表，每一条数据都有一个status状态，只有status是完成，才能点击展开expand,否则不能出现expand
Element - 图4
给行添加样式

  1. <el-table
  2.     :data="tableData"
  3.     :row-class-name="tableRowClassName"
  4.     style="width: 100%">
  5.     ...
  6. </el-table>
  9. methods:{
  10.   tableRowClassName({ row }) {
  11.     if (row.status !== 0) {
  12.       return 'not-finish';
  13.     }
  14.     return '';
  15.   },
  16. }

相关文章
https://www.freesion.com/article/41561306040/

Pagination 分页

基本示例 

  1. <div class="block">
  2.   <span class="demonstration">页数较少时的效果</span>
  3.   <el-pagination
  4.     layout="prev, pager, next"
  5.     :total="50">
  6.   </el-pagination>
  7. </div>
  8. <div class="block">
  9.   <span class="demonstration">大于 7 页时的效果</span>
  10.   <el-pagination
  11.     layout="prev, pager, next"
  12.     :total="1000">
  13.   </el-pagination>
  14. </div>

参数说明

参数 说明 类型 示例
current-page 当前页数，支持 .sync 修饰符 number 1
page-sizes 每页显示个数选择器的选项设置 number[] [10, 20, 30, 40, 50, 100]
layout 表示需要显示的内容，用逗号分隔，布局元素会依次显示 prev表示上一页，next为下一页，pager表示页码列表，jumper表示跳页元素
和total表示总条目数，
size用于设置每页显示的页码数量
total 总条目数 number

Upload上传组件

on-success 文件上传成功时的钩子 function(response, file, fileList)
action 必选参数，上传的地址

Cascader级联选择器

  1. options: [{
  2.   value: 'zhinan',
  3.   label: '指南',
  4.   children: [{
  5.     value: 'shejiyuanze',
  6.     label: '设计原则',
  7.     children: [{
  8.       value: 'yizhi',
  9.       label: '一致'
  10.     }, {
  11.       value: 'fankui',
  12.       label: '反馈'
  13.     }, {
  14.       value: 'xiaolv',
  15.       label: '效率'
  16.     }, {
  17.       value: 'kekong',
  18.       label: '可控'
  19.     }]
  20.   }, {
  21.     value: 'daohang',
  22.     label: '导航',
  23.     children: [{
  24.       value: 'cexiangdaohang',
  25.       label: '侧向导航'
  26.     }, {
  27.       value: 'dingbudaohang',
  28.       label: '顶部导航'
  29.     }]
  30.   }]
  31. }]

注意：需要特定层级的数据结构，如果数据结构和上方不一致，需要配置项进行配置

  1. <el-cascader
  2.   ref="cascaderHandle"
  3.   v-model="form.category"
  4.   clearable
  5.   :show-all-levels="false"
  6.   :options="goodsCategoryOptions"
  7.   :props="cascaderProps"
  8.   @change="handleCascaderChange"
  9. />
  12. cascaderProps: {
  13.   // expandTrigger: 'hover',
  14.   checkStrictly: true, // 父子节点取消选中关联
  15.   value: 'category_id', //指定选项值
  16.   label: 'category_name',
  17.   children: 'children'
  18. }
props 配置选项，具体见下表 object

问题：将级联选择器设置任意级别可选后，无法自动关闭

  1. // 关闭级联选择器
  2. this.$refs.cascaderHandle.dropDownVisible = false

问题：级联组件获取lable值
经测试 下方代码可以获取

  1. //先给组件设置ref
  2. this.$refs['cascaderAddr'].getCheckedNodes()[0].label

网上提供的答案

  1. <el-cascader
  2.     :options="options"
  3.     v-model="selectedOptions"
  4.     :props="props"
  5.     size="small"
  6.     ref="cascaderAddr"
  7.     filterable
  8.     @change="handleChange"
  9.     change-on-select
  10.     placeholder="请选择上级分类"/>
  12. <script>
  13. handleChange(e) {
  14.       //第1种
  15.       var   thsAreaCode = this.$refs['cascaderAddr'].currentLabels    // 获取label值
  16.       console.log(thsAreaCode); //  最终结果是个一维数组对象
  17.        //第2种
  18.       const checkedNodes = this.$refs['cascaderAddr'].getCheckedNodes() // 获取当前点击的节点
  19.       console.log(checkedNodes)
  20.       console.log(checkedNodes[0].data.label) // 获取当前点击的节点的label
  21.       console.log(checkedNodes[0].pathLabels) // 获取由 label 组成的数组
  22. },
  23. </script>

Carousel走马灯

场景：在轮播图下方有对应图片的缩略图列表，点击对应的缩略图可以跳转到对应的轮播图位置

即：需要手动触发方法进行选择

setActiveItem 手动切换幻灯片 需要切换的幻灯片的索引，从 0 开始；或相应 el-carousel-item 的 name 属性值 
  1. <div id="app">
  2.  <button v-on:click="setActiveItem('first')">Go First</button>
  3.  <button v-on:click="setActiveItem('second')">Go Second</button>
  5.  <template>
  6.    <el-carousel ref="carousel" indicator-position="none" autoplay='false'>
  7.        <el-carousel-item name ='first'>
  8.            <h3>First</h3>
  9.        </el-carousel-item>
  10.        <el-carousel-item name ='second'>
  11.          <h3>Second</h3>
  12.        </el-carousel-item>
  13.   </el-carousel>
  14. </template>
  1. methods: {
  2.   setActiveItem(index) {
  3.     this.$refs.carousel.setActiveItem(index);
  4.   }
  5. }

NavMenu 导航菜单

场景：点击菜单栏之后，再点击其他菜单栏，会导致多个菜单栏同时打开。保持一个子菜单的展开

unique-opened 是否只保持一个子菜单的展开

Tabs标签页

场景：给el-tab 添加 badge

  1. <el-tab-pane name="aaa">
  2.   <span slot="label">
  3.     页面一<el-badge :value="val1"></el-badge>
  4.   </span>
  5. </el-tab-pane>

相关文章：
实时更新标记值
https://blog.csdn.net/zhengyun1568/article/details/108409618

el-scrollbar

官方文档并没有，但是在其他组件中有使用

基本用法

  1. 引入
  2. 在标签内层的元素设置高度（在外层或el-scrollbar设置高度仍然可用，但是css不能达到预期效果）
  3. 在内层放置足够多的垂直元素

example:

  1. import { Scrollbar } from 'element-ui'
  2. Vue.use(Scrollbar)
  4. <el-scrollbar>
  5.   <ul style="height: 100px;">
  6.     <li v-for="item in 100" :key="item"> {{item}}</li>
  7.   </ul>
  8. </el-scrollbar>

注意：可能出现横向有滚动条
解决：

  1. .el-scrollbar__wrap{
  2.   overflow-x: hidden;
  3. }

相关文章
https://juejin.cn/post/6844903793377673230
https://segmentfault.com/a/1190000022890903
https://github.com/ElemeFE/element/issues/2238

Popover 弹出框

https://element.eleme.cn/#/zh-CN/component/popover
主动触发关闭操作

  1. this.$refs["popover"].doClose();

checkbox

checkbox的 true-label,false-label 怎么使用？

注：经测试，这个属性在 checkbox-group 中使用没有效

true-label,false-label规定v-model中的值，如下例所示

  1.  <el-checkbox true-label=1 false-label=0 v-model="checked">备选项</el-checkbox>
  3.  checked: "1",

问题合集

table中有fixed列后出现高度不对的情况

问题描述：最后一列为fixed属性时，高度会出现未占满父元素的整个高度，因此会出现一条灰线。因为高度是动态计算的
解决方案：在标签上加一个class=”table-fixed”，在样式文件中增加如下css代码（利用样式穿透）

  3. .table-fixed {
  4.   /deep/ .el-table__fixed-right {
  5.     height: 100% !important; //设置高优先，以覆盖内联样式
  6.   }
  8.   /deep/ .el-table__fixed {
  9.     height: 100% !important; //设置高优先，以覆盖内联样式
  10.   }

element datepicker 组件设置禁止选择时间

需求背景：禁止用户在输入内容的时候选择今天以前的日期或者包含今日的日期
设置禁用时间主要为设置组件的此属性=> :picker-options=”pickerOptions”

  1. <el-date-picker
  2.         value-format="yyyy-MM-dd"
  3.         v-model="form.strategy.date"
  4.         type="daterange"
  5.         range-separator="至" start-placeholder="开始日期"
  6.         end-placeholder="结束日期"
  7.         :picker-options="pickerOptions">
  8.     </el-date-picker>
  10.         export default {
  11.             data() {
  12.                 return {
  13.                     pickerOptions: {
  14.                         disabledDate(time) {
  15.                             //此条为设置禁止用户选择今天之前的日期，包含今天。
  16.                             // return time.getTime() <= (Date.now());
  17.                             //此条为设置禁止用户选择今天之前的日期，不包含今天。
  18.                             return time.getTime() < (Date.now()-(24 * 60 * 60 * 1000));
  19.                         }
  20.                     }
  21.                 }
  22.             }
  23.         }

el-input验证

这只是限制输入框的输入，但是不能进行错误提示，错误提示还需要使用el-form.
场景：在表格中输入 input 框中进行输入验证 

  1. //只能输入正整数
  2. <el-input 
  3.   type="number"
  4.   placeholder="请输入"
  5.   min="1" 
  6.   oninput ="value=value.replace(/[^\d]/g,'')"
  7.   v-model.number="count"
  8. ></el-input>

https://blog.csdn.net/weixin_44980732/article/details/115219944

DaterPicker 报错

报错信息：TypeError: dateObject.getTime is not a function
代码信息：

  1. <el-form-item label="直播日期：" style="width: 400px;" prop="date">
  2.     <el-date-picker type="date" 
  3.             placeholder="选择日期" 
  4.             v-model="form.date"  
  5.             value-format="yyyy-MM-dd">
  6.     </el-date-picker>
  7. </el-form-item>
  9.  rules: {
  10.       date:  [ 
  11.         { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
  12.       ]
  13. }

解决办法：
去除type参数，因为使用 value-formate=”yyyy-MM-dd” 将组件的数据格式转换了，所以会报错

  1.  rules: {
  2.       date:  [ 
  3.         {required: true, message: '请选择日期', trigger: 'change' }
  4.       ]
  5. }

https://blog.csdn.net/xyy1234567891/article/details/100530393

Form 表单清空方法

场景：在复用一个表单的时候，需要对之前的表单内容进行清空操作
问题：使用官方的方法进行清空表单无效
解决：需要加上一个判断，但是不要写在 $nextTick() 中

方案一：官方方法 resetFields()

  1. <el-form :model="formData" :rules="rules" ref="formData">
  3. if(this.$refs.formData){  //第一次打开 dialog 弹窗会报错，所以需要判断一下
  4.     this.$refs.formData.resetFields();
  5. }

注意: 这个方法有问题 不能使用 

  1. this.$refs['formName'].resetFields();

方案二：在el-form标签上添加 v-if =”dialogShow”，这样弹窗每次关闭再打开的时候会重新生成一个表单

  1. <el-dialog title="test" :visible.sync="dialogShow">
  2.     <el-form v-if="dialogShow" ref="formData" :model="formData">
  3.         -------
  4.     </el-form>
  5. </el-dialog>

方案三：给 el-form 添加一个动态的 key ,只要key值不一样就不会复用之前的组件 

  1. <--代码块-->
  2.  <el-dialog title="test" :visible.sync="dialogShow">
  3.     <el-form :key="more" ref="formData" :model="formData">
  4.         -------
  5.     </el-form>
  6. </el-dialog>
  8. //data声明more
  9. more:0
  11. //打开弹窗方法里面
  12. this.more++

Form 表单验证条件

场景：在form表单中，针对不同的选项切换，添加的表单可能需要验证或者不需要验证，如何通过条件判断给该表单加或不加验证呢

解决：在 prop 中进行设定

  1. :prop="isFlag ? 'name' : ''"

注意：动态设置 rules 这种形式不生效

相关文章
https://www.cnblogs.com/qdlhj/p/12332407.html

el-table 相关操作

table 隐藏表头 

  1. show-header 属性

表格达到每一格都需要有上下 margin 的效果
注意：给 tr 加 margin 不会生效，需要下面代码 

  1. table{
  2.     border-collapse: separate;
  3.     border-spacing: 5px 10px;
  4. }

el-table 合并单元格

官方示例与说明
通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。

  1. <template>
  2.   <div>
  3.     <el-table
  4.       :data="tableData"
  5.       :span-method="arraySpanMethod"
  6.       border
  7.       style="width: 100%">
  8.       <el-table-column
  9.         prop="id"
  10.         label="ID"
  11.         width="180">
  12.       </el-table-column>
  13.       <el-table-column
  14.         prop="name"
  15.         label="姓名">
  16.       </el-table-column>
  17.       <el-table-column
  18.         prop="amount1"
  19.         sortable
  20.         label="数值 1">
  21.       </el-table-column>
  22.       <el-table-column
  23.         prop="amount2"
  24.         sortable
  25.         label="数值 2">
  26.       </el-table-column>
  27.       <el-table-column
  28.         prop="amount3"
  29.         sortable
  30.         label="数值 3">
  31.       </el-table-column>
  32.     </el-table>
  34.     <el-table
  35.       :data="tableData"
  36.       :span-method="objectSpanMethod"
  37.       border
  38.       style="width: 100%; margin-top: 20px">
  39.       <el-table-column
  40.         prop="id"
  41.         label="ID"
  42.         width="180">
  43.       </el-table-column>
  44.       <el-table-column
  45.         prop="name"
  46.         label="姓名">
  47.       </el-table-column>
  48.       <el-table-column
  49.         prop="amount1"
  50.         label="数值 1（元）">
  51.       </el-table-column>
  52.       <el-table-column
  53.         prop="amount2"
  54.         label="数值 2（元）">
  55.       </el-table-column>
  56.       <el-table-column
  57.         prop="amount3"
  58.         label="数值 3（元）">
  59.       </el-table-column>
  60.     </el-table>
  61.   </div>
  62. </template>
  64. <script>
  65.   export default {
  66.     data() {
  67.       return {
  68.         tableData: [{
  69.           id: '12987122',
  70.           name: '王小虎',
  71.           amount1: '234',
  72.           amount2: '3.2',
  73.           amount3: 10
  74.         }, {
  75.           id: '12987123',
  76.           name: '王小虎',
  77.           amount1: '165',
  78.           amount2: '4.43',
  79.           amount3: 12
  80.         }, {
  81.           id: '12987124',
  82.           name: '王小虎',
  83.           amount1: '324',
  84.           amount2: '1.9',
  85.           amount3: 9
  86.         }, {
  87.           id: '12987125',
  88.           name: '王小虎',
  89.           amount1: '621',
  90.           amount2: '2.2',
  91.           amount3: 17
  92.         }, {
  93.           id: '12987126',
  94.           name: '王小虎',
  95.           amount1: '539',
  96.           amount2: '4.1',
  97.           amount3: 15
  98.         }]
  99.       };
  100.     },
  101.     methods: {
  102.       arraySpanMethod({ row, column, rowIndex, columnIndex }) {
  103.         if (rowIndex % 2 === 0) {
  104.           if (columnIndex === 0) {
  105.             return [1, 2];
  106.           } else if (columnIndex === 1) {
  107.             return [0, 0];
  108.           }
  109.         }
  110.       },
  112.       objectSpanMethod({ row, column, rowIndex, columnIndex }) {
  113.         if (columnIndex === 0) {
  114.           if (rowIndex % 2 === 0) {
  115.             return {
  116.               rowspan: 2,
  117.               colspan: 1
  118.             };
  119.           } else {
  120.             return {
  121.               rowspan: 0,
  122.               colspan: 0
  123.             };
  124.           }
  125.         }
  126.       }
  127.     }
  128.   };
  129. </script>

两种返回方式
数组

  1. [1,2] //合并1行,2列

对象

  1. {
  2.   rowspan: 3, //合并3行
  3.   colspan: 1  //合并1列
  4. }

表格渲染顺序
从第一行开始，rowIndex为0，列从左到右（columnIndex从0到最后一列）；然后第二行，rowIndex为1，列从左到右……

置空操作
合并单元格时，系统会取第一个单元格的值。Element在操作单元格时，也是取第一个单元格的值，但是不会将第二个单元格的值置空，这就会导致多出的值没有做处理，因此，我们需要手动处理，定位到被合并的行或者列，将其值置为空，即返回 [0, 0] 。

示例2

  1. <template>
  2.   <div>
  3.     <el-table
  4.       :data="tableData"
  5.       :span-method="arraySpanMethod"
  6.       border
  7.       style="width: 100%"
  8.     >
  9.       <el-table-column prop="date" label="日期" width="150"></el-table-column>
  10.       <el-table-column label="配送信息">
  11.         <el-table-column prop="name" label="姓名" width="120"></el-table-column>
  12.         <el-table-column label="地址">
  13.           <el-table-column prop="province" label="省份"></el-table-column>
  14.           <el-table-column prop="city" label="市区"></el-table-column>
  15.           <el-table-column prop="address" label="地址"></el-table-column>
  16.           <el-table-column prop="zip" label="邮编"></el-table-column>
  17.         </el-table-column>
  18.       </el-table-column>
  19.     </el-table>
  20.   </div>
  21. </template>
  22. <script>
  23. var combineArr = []
  24. export default {
  25.   data() {
  26.     return {
  27.       tableData: [
  28.         {
  29.           date: "2016-05-01",
  30.           name: "王小虎",
  31.           province: "上海",
  32.           city: "普陀区0",
  33.           address: "上海市普陀区金沙江路 1518 弄",
  34.           zip: 500,
  35.         },
  36.         {
  37.           date: "2016-05-02",
  38.           name: "王小虎",
  39.           province: "上海",
  40.           city: "普陀区1",
  41.           address: "上海市普陀区金沙江路 1519 弄",
  42.           zip: 300,
  43.         },
  44.         {
  45.           date: "2016-05-02",
  46.           name: "王小虎",
  47.           province: "上海",
  48.           city: "普陀区1",
  49.           address: "上海市普陀区金沙江路 1520 弄",
  50.           zip: 200,
  51.         },
  52.         {
  53.           date: "2016-05-02",
  54.           name: "王小虎",
  55.           province: "上海",
  56.           city: "普陀区1",
  57.           address: "上海市普陀区金沙江路 1521 弄",
  58.           zip: 100,
  59.         },
  60.         {
  61.           date: "2016-05-03",
  62.           name: "王小虎",
  63.           province: "上海",
  64.           city: "普陀区2",
  65.           address: "上海市普陀区金沙江路 1522 弄",
  66.           zip: 100,
  67.         },
  68.         {
  69.           date: "2016-05-04",
  70.           name: "王小虎",
  71.           province: "上海",
  72.           city: "普陀区3",
  73.           address: "上海市普陀区金沙江路 1523 弄",
  74.           zip: 100,
  75.         },
  76.         {
  77.           date: "2016-05-04",
  78.           name: "王小虎",
  79.           province: "上海",
  80.           city: "普陀区3",
  81.           address: "上海市普陀区金沙江路 1524 弄",
  82.           zip: 200,
  83.         },
  84.         {
  85.           date: "2016-05-05",
  86.           name: "王小虎",
  87.           province: "上海",
  88.           city: "普陀区4",
  89.           address: "上海市普陀区金沙江路 1525 弄",
  90.           zip: 300,
  91.         },
  92.       ],
  93.     }
  94.   },
  95.   methods: {
  96.     flitterData(arr) {
  97.       let spanOneArr = []
  98.       let concatOne = 0
  99.       arr.forEach(function (item, index) {
  100.         if (index === 0) {
  101.           spanOneArr.push(1)
  102.         } else {
  103.           if (item.date === arr[index - 1].date) {
  104.             //第一列需合并相同内容的判断条件
  105.             spanOneArr[concatOne] += 1
  106.             spanOneArr.push(0)
  107.           } else {
  108.             spanOneArr.push(1)
  109.             concatOne = index
  110.           }
  111.         }
  112.       })
  113.       return {
  114.         one: spanOneArr,
  115.       }
  116.     },
  118.     arraySpanMethod({ row, column, rowIndex, columnIndex }) {
  119.       if (rowIndex === 0) {
  120.         // if (columnIndex === 0) {
  121.         //   return [1, 6]
  122.         // }
  123.         // if (columnIndex < 6) {
  124.         //   return [0, 0]
  125.         // }
  126.       } else {
  127.         if (columnIndex === 0) {
  128.           const _row = this.flitterData(this.tableData).one[rowIndex]
  129.           const _col = _row > 0 ? 1 : 0
  130.           console.log(_row, _col, "res") //
  131.           combineArr = [_row, _col]
  132.           return combineArr
  133.         } else if (columnIndex === 3 || columnIndex === 5) {
  134.           return combineArr
  135.         }
  136.       }
  137.     },
  138.   },
  139. }
  140. </script>

问题：

  1. 合并数据的取值取的是哪一个？
    1. 第一个，不是后面一个

场景：合并一整行或者一整列的场景

  1. objectSpanMethod({ row, column, rowIndex, columnIndex }) {
  2.   // 取需要渲染数据的整个长度
  3.   let len = this.tableData.length
  4.   if (columnIndex === 0 || columnIndex === 1) {
  5.     if (rowIndex % len === 0) {
  6.       return {
  7.         rowspan: len,
  8.         colspan: 1,
  9.       }
  10.     } else {
  11.       return {
  12.         rowspan: 0,
  13.         colspan: 0,
  14.       }
  15.     }
  16.   }
  17. },

image.png
因为是从第二行开始的，所以打印的结果有7条。通过打印结果可以看出这个值与表格展示的关系。

https://juejin.cn/post/6874441001554051085
https://juejin.cn/post/7017990649190301710
https://juejin.cn/post/7033660336762781733
https://juejin.cn/post/6844903792282959885
https://segmentfault.com/a/1190000038152474

el-table表格在使用v-if之后列的顺序错乱

原因： el-table-column中使用 v-if=”…”
解决：给该列加上唯一的key即可

  1.   <el-table-column
  2.      prop="create_date"
  3.      label="时间"
  4.      align="center"
  5.      key="38"
  6.  />

注意：当有如下场景时，比如多列的显示感觉条件判断来的，可能会使用 section 进行包裹，这时候进行 section 中的判断那么错乱依旧会出现，需要将条件写到对应的列中。

相关文章
https://blog.csdn.net/weixin_42349568/article/details/114188270

datePicker 组件禁止选择当天时间的配置

设置禁用时间主要为设置组件的此属性=> :picker-options=”pickerOptions”

  1.     <el-date-picker
  2.         value-format="yyyy-MM-dd"
  3.         v-model="form.strategy.date"
  4.         type="daterange"
  5.         range-separator="至" start-placeholder="开始日期"
  6.         end-placeholder="结束日期"
  7.         :picker-options="pickerOptions">
  8.     </el-date-picker>
  10.         export default {
  11.             data() {
  12.                 return {
  13.                     pickerOptions: {
  14.                         disabledDate(time) {
  15.                             //此条为设置禁止用户选择今天之前的日期，包含今天。
  16.                             // return time.getTime() <= (Date.now());
  17.                             //此条为设置禁止用户选择今天之前的日期，不包含今天。
  18.                             return time.getTime() < (Date.now()-(24 * 60 * 60 * 1000));
  19.                         }
  20.                     }
  21.                 }
  22.             }
  23.         }

datePicker 当前时间配置

  1. //  :default-time="['00:00:00', '23:59:59']"
  3. <el-date-picker
  4.   v-model="params.time_range"
  5.   type="daterange"
  6.   :default-time="['00:00:00', '23:59:59']"
  7.   range-separator="-"
  8.   start-placeholder="开始日期"
  9.   end-placeholder="结束日期"
  10.   value-format="timestamp"
  11.   style="width: 324px"
  12.   :picker-options="{
  13.     disabledDate(time) {
  14.       return (
  15.         time.getTime() - 1 >=
  16.         new Date(
  17.           new Date().getFullYear(),
  18.           new Date().getMonth(),
  19.           new Date().getDate()
  20.         ).getTime() +
  21.         86400000 -
  22.         1
  23.       )
  24.     }
  25.   }"
  26.   @change="getProjectMaterials"
  27. />

动态菜单只有一个子菜单时不显示父级菜单

添加属性 ： alwaysShow: true

  1.  * alwaysShow: true             
  3. if set true, will always show the root menu
  4. if not set alwaysShow, when item has more than one children

el-select 修改宽度

场景：el-form-item 内的 el-selet 如何自适应宽度。只有给 el-select 设置固定的值才会生效。
解决：
因为 el-select 使用的是inline-block ，需要将其设置为 block

  1. 增加样式
  2. .{
  3.   display:block;
  4. }

el-tabs 首页加载时。下划线不会加载

el-select 传递多个值

场景：在点击下拉框选择后，我想要拿到的可能不是一个值，是多个值。
解决方案：

  1. 将所需要的值都传过去
  2. 只传一个值，但是可以通过这个值去查找到需要找的详细值信息

项目中的实际应用方式

  1. <el-select
  2.   v-model="value"
  3.   placeholder="请选择"
  4.   clearable
  5.   @change="select"
  6. >
  7.   <el-option
  8.     v-for="item in options"
  9.     :key="item.value"
  10.     :label="item.label"
  11.     :value="{
  12.       value: item.value,
  13.       label: item.label
  14.     }"
  15.   />
  16. </el-select>
  19. select(value){
  20.    console.log(value) //{label:'',value:''}
  21. }

拓展：如果仅仅是选择下拉框在传递循环列表中的某个值呢，即组件的选中方法能不能额外在传一个参数？

el-select 的 change 事件默认不传参数时可获取到值是选中的值

  1. @change="handleSelectGroup"

当涉及到循环动态生成多个select组件并且想要获取到当前所选的组件是哪个的时候，就需要从select的change事件获取到多个参数，一般需要传上当前选中的值与当前索引。
备注：cascader 同样适用的

方法一： $event 即是当前所选的值

  1. @change="handleSelectGroup($event, i)"

方法二：val即是当前所选的值

  1. @change="((val)=>{handleSelectGroup(val, i)})"
  1.  //父元素遍历
  2.   <div v-for="(item, i) in dataArr" :key="i">
  3.   //子元素
  4.       <el-select v-model="item.groupType" placeholder="请选择分组" value-key="code" @change="handleSelectGroup($event, i)">
  5.           <el-option v-for="item in groupOptions" :key="item.code" :label="item.name" :value="item.code"> </el-option>
  6.       </el-select>
  7.   <div>
  8.    handleSelectGroup(code, i) {
  9.         console.log(code)//code值为:value="item.code"
  10.         console.log(i)//当前操作的索引，，遍历的时候传来的
  11.     },

相关文章
https://blog.csdn.net/weixin_45654407/article/details/116642031

cascader 级联选择器获取label值

传递多个值的情景？
场景：在@change事件中，可能需要传递其他值，如何传递并接收呢？
解决：参考上述 el-select , 这种写法都是一样的

给 el-cascader 设置 ref ,然后通过this.$refs[‘cascaderMallCatergory’].getCheckedNodes()[0].pathLabels 来获取选中的label值。

  1. <el-cascader
  2.   ref="cascader"
  3.   :options="data"
  4.   @change="handleCascaderChange">
  5. </el-cascader>
  7. //返回的结果是一个数组；如果想要取最后一项，不可使用pop，这样会改变原数组 
  8. handleCascaderChange(){
  9.   let res = this.$refs['cascaderMallCatergory'].getCheckedNodes()[0].pathLabels
  10. }

Form 组件 resetFields 方法失效

https://juejin.cn/post/6844904144898097166 【重点参考】

el-upload 组件报错

报错详情：Error in nextTick: “TypeError: Cannot create property ‘uid’ on string
报错原因：此类错误是赋值的类型错误，在使用upload组件时，把字符串列表赋值给了 fileList，而 fileList 需求的是对象的列表

错误示例

  1. pictureList = ['url1', 'url2'];

正确示例

  1. pictureList = ['url1', 'url2'];
  2. this.fileList = pictureList.map(item => {
  3.        return {
  4.          name: item,
  5.          url: item
  6.        }
  7. });

checkbox-group 和 checkbox能否实现取值于value而不是label

场景： 在使用 checkbox 的时候，选中的值是label的值，如何可以实现，选中的值与显示的值不是同一个值呢？
示例： 我希望checkList的值是[0,2]这样的值，而不是[“复选框A”]这样的值

  1. <checkbox-group v-model="checkList">
  2.     <checkbox class="checkbox" label="复选框 A" value="0"></checkbox>
  3.     <checkbox class="checkbox" label="复选框 B" value="1"></checkbox>
  4.     <checkbox class="checkbox" label="复选框 C" value="2"></checkbox>
  5.     <checkbox class="checkbox" label="禁用" disabled></checkbox>
  6.     <checkbox class="checkbox" label="选中且禁用" disabled></checkbox>
  7. </checkbox-group>

解决：

  1.     <el-checkbox-group v-model="pushGalleryInfo.cdi">
  2.       <el-checkbox v-for="item in originalCdi" :label="item.value" name="cdi">
  3.         {{ item.label }}
  4.       </el-checkbox>
  5.     </el-checkbox-group>

官方文档定义：

checkbox-group元素能把多个 checkbox 管理为一组，只需要在 Group 中使用v-model绑定Array类型的变量即可。 el-checkbox 的 label属性是该 checkbox 对应的值，若该标签中无内容，则该属性也充当 checkbox 按钮后的介绍。label与数组中的元素值相对应，如果存在指定的值则为选中状态，否则为不选中。

详细：issues https://github.com/ElemeFE/element/issues/647