https://element.eleme.cn/#/zh-CN

  • 学习各种组件的基本用法
  • 编写一些实例

1、element中切换时间日期选择器时下拉框偏移到左上角的问题

https://blog.csdn.net/html5_student/article/details/122616312
第一次点击都是正常的，但是第二次直接偏移到左上角。
解决方案：
在el-date-picker里面加上 key=“XXXX”即可 名字随便取

1、日期范围选择控件，限制只能选择30天

https://blog.csdn.net/liming1016/article/details/120112482

  1. <el-date-picker v-model="value1" type="daterange"
  2.       start-placeholder="开始日期" 
  3.       range-separator="至" 
  4.       end-placeholder="结束日期"
  5.       value-format="yyyy-MM-dd"
  6.       :picker-options="pickerOptions1">
  7. </el-date-picker>
  1. data () {
  2.    return {
  3.      value1: '', // 日
  4.      data1Map: new Map(),
  5.      data2Map: new Map(),
  6.      pickerMinDate: null,
  7.      pickerMaxDate: null,
  8.      day31: 31 * 24 * 3600 * 1000,
  9.      // 日期使用
  10.      pickerOptions1: {
  11.         onPick: ({ maxDate, minDate }) => {
  12.          if (minDate && this.pickerMinDate) {
  13.            this.pickerMinDate = null;
  14.          } else if (minDate) {
  15.            this.pickerMinDate = minDate.getTime();
  16.          }
  17.        },
  18.        disabledDate: (time) => {
  19.          if (this.pickerMinDate) {
  20.            return (time.getTime() > (this.pickerMinDate + this.day31)) || (time.getTime() < (this.pickerMinDate - this.day31));
  21.          }
  22.          return false;
  23.        }
  24.      },
  25.    };
  26.  },

2、table固定表头、固定列

https://blog.csdn.net/RRRRRDong/article/details/118862371

  1. 使用position:sticky来固定表头 ```

    1 2 3 4 5
    1 2 3 4 5
    1 2 3 4 5
    1 2 3 4 5
    1 2 3 4 5
    1 2 3 4 5
    1 2 3 4 5
    1 2 3 4 5
    1 2 3 4 5
    1 2 3 4 5 
  1. ```
  2. #common-table {
  3.       width: 100%;
  4.       height: 500px;
  5.       overflow: hidden;
  6.     }
  8.     #table-container {
  9.       height: 400px;
  10.       overflow-y: auto;
  11.       display: block;
  12.       width: 100%;
  13.       table-layout: fixed;
  14.     }
  16.     #table-container thead {
  17.       border-left: 1px solid #DFE2EB;
  18.       border-top: 1px solid #DFE2EB;
  19.       position: sticky;
  20.       top: 0;
  21.       left: 0;
  22.       right: 0;
  23.       display: table;
  24.       width: 100%;
  25.       table-layout: fixed;
  26.     }
  28.     #table-container thead tr>th {
  29.       background-color: #fafafa;
  30.       font-size: 14px;
  31.       font-family: Microsoft YaHei UI;
  32.       font-weight: bold;
  33.       color: #333333;
  34.       border-bottom: 1px solid #DFE2EB;
  35.       border-right: 1px solid #DFE2EB;
  36.       padding: 15px;
  37.     }
  39.     #table-container thead tr>th>div {
  40.       padding: 5px 10px;
  41.       min-width: 40px;
  42.       display: flex;
  43.       align-items: center;
  44.       justify-content: center;
  45.     }
  47.     #table-container tbody {
  48.       border-left: 1px solid #DFE2EB;
  49.       display: table;
  50.       width: 100%;
  51.       table-layout: fixed;
  52.     }
  54.     #table-container tbody tr>td {
  55.       font-size: 12px;
  56.       font-family: Microsoft YaHei UI;
  57.       font-weight: 400;
  58.       padding: 13px;
  59.     }
  61.     #table-container td,
  62.     #table-container th {
  63.       border-bottom: 1px solid #DFE2EB;
  64.       border-right: 1px solid #DFE2EB;
  65.       text-align: center;
  66.       padding: 5px;
  67.     }

3、el-select的multiple属性从false切换为true时页面值不清空

https://wenku.baidu.com/view/adae929cfe0a79563c1ec5da50e2524de518d0c5.html

关键点：先把值undefined 再用this.$nextTick

  1. this.$set(this.form.appointmentUserList[index],'userIds',undefined);
  4. this.$nextTick(() => {
  5. if(checkWzArr[checkWzArr.length-1].positionKey){
  6.     this.multiple=false;
  7.     this.$set(this.form.appointmentUserList[index],'userIds',null);
  8. }else{
  9.     this.multiple=true;
  10.     this.$set(this.form.appointmentUserList[index],'userIds',[]);
  11. }
  12. }）

4、cascader获取当前选择的整个对象

  1. //element组件里的 getCheckedNodes    获取选中的节点
  2.             getCascaderObj(val, opt) {
  3.                 return val.map(function(value, index, array) {
  4.                     for (let itm of opt) {
  5.                         if (itm.id === value) {
  6.                             opt = itm.childVO;
  7.                             return itm;
  8.                         }
  9.                     }
  10.                     return null;
  11.                 });
  12.             },
  13.             //切换岗位
  14.             postChange(value,index){
  15.                let checkWzArr = this.getCascaderObj(value, this.postOptions); //选中节点数据
  16.             },

5、vue2-org-tree 组织架构图

https://gitee.com/hukaicode/vue-org-tree

6、富媒体wangEditor v5，系统中之前装的是v3

cmd 中 vue —version 查看vue版本 我是2.9.6
官网：
https://www.wangeditor.com/v5/installation.html#npm

安装 editor
npm install @wangeditor/editor —save
安装 Vue2 组件
npm install @wangeditor/editor-for-vue —save

使用

  1. <div style="border: 1px solid #ccc; margin-top: 10px;">
  2.                                 <!-- 工具栏 -->
  3.                                 <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig"></Toolbar>
  4.                                 <!-- 编辑器 -->
  5.                                 <Editor style="height: 400px; overflow-y: hidden;"
  6.                                         :defaultConfig="editorConfig"
  7.                                         v-model="form.fileContentHtml"
  8.                                         @onCreated="onCreated"
  9.                                 ></Editor>
  10.                             </div>
  14.  <script>
  15.     import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
  16.   export default {
  17.         name: 'tableOne',
  18.         props:['businessTypeList'],
  19.         components:{
  20.             Editor, Toolbar
  21.         },
  22.         data() {
  23.             return {
  24.                 isShow:false,
  25.                 editor: null,
  26.         //toolbarConfig:{} 表示默认分配菜单
  27.                 toolbarConfig: {
  28.                     toolbarKeys:[
  29.                         // 菜单 key
  30.                         'headerSelect',
  31.                         // 分割线
  32.                         '|',
  33.                         // 菜单 key 
  34.                         'bold', 'italic','through','sub','sup','clearStyle','color','bgColor','fontSize','fontFamily','indent','delIndent',
  35.                         'justifyLeft','justifyRight','justifyCenter','justifyJustify','lineHeight',
  36.                         'divider','insertLink','unLink','blockquote','redo','undo',
  37.                         'bulletedList','numberedList','insertTable','uploadImage',
  38.                     ]
  39.                 },
  40.                 editorConfig: {
  41.                     placeholder: '请输入内容...',
  42.                     MENU_CONF: {
  43.                         uploadImage: {
  44.                             // 小于该值就插入 base64 格式（而不上传），默认为 0
  45.                         base64LimitSize: 5000 * 1024, // 默认上限为5000k
  46.                         },
  47.                     }
  48.                 },
  51.             };
  52.         },
  54.   methods: {
  55.             onCreated(editor) {
  56.                 this.editor = Object.seal(editor) // 【注意】一定要用 Object.seal() 否则会报错
  57.                 //console.log(editor.getAllMenuKeys().toString()) 
  58.             },
  60.           beforeDestroy() {
  61.                 const editor = this.editor;
  62.                 if (editor == null) return;
  63.                 editor.destroy() // 组件销毁时，及时销毁 editor ，重要！！！
  64.             },
  66.  }
  68. </script>
  69. <style src="@wangeditor/editor/dist/css/style.css"></style>

注意：一个页面多个编辑器 共用 toolbarConfig 和 editorConfig

  1.     <el-col :span="24">
  2.                         <el-form-item label="安全生产责任制：" prop="content1"
  3.                                       :rules="[{ required: true, message: '安全生产责任制不能为空！', trigger: 'change' }]">
  4.                             <div style="border: 1px solid #ccc; margin-top: 10px;">
  5.                                 <!-- 工具栏 -->
  6.                                 <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor1" :defaultConfig="toolbarConfig"></Toolbar>
  7.                                 <!-- 编辑器 -->
  8.                                 <Editor style="height: 400px; overflow-y: hidden;"
  9.                                         :defaultConfig="editorConfig"
  10.                                         v-model="form.content1"
  11.                                         @onCreated="onCreated1"
  12.                                 ></Editor>
  13.                             </div>
  14.                         </el-form-item>
  15.                     </el-col>
  16.                     <el-col :span="24">
  17.                         <el-form-item label="责任制说明/履职清单：" prop="content2"
  18.                                       :rules="[{ required: true, message: '责任制说明/履职清单不能为空！', trigger: 'change' }]">
  19.                             <div style="border: 1px solid #ccc; margin-top: 10px;">
  20.                                 <!-- 工具栏 -->
  21.                                 <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor2" :defaultConfig="toolbarConfig"></Toolbar>
  22.                                 <!-- 编辑器 -->
  23.                                 <Editor style="height: 400px; overflow-y: hidden;"
  24.                                         :defaultConfig="editorConfig"
  25.                                         v-model="form.content2"
  26.                                         @onCreated="onCreated2"
  27.                                 ></Editor>
  28.                             </div>
  29.                         </el-form-item>
  30.                     </el-col>
  1.            onCreated1(editor) {
  2.                 this.editor1 = Object.seal(editor); // 【注意】一定要用 Object.seal() 否则会报错
  3.             },
  4.             onCreated2(editor) {
  5.                 this.editor2 = Object.seal(editor); // 【注意】一定要用 Object.seal() 否则会报错
  6.             },
  7.               beforeDestroy() {
  8.                 const editor1 = this.editor1;
  9.                 const editor2 = this.editor2;
  10.                 if (editor1 == null || editor2 == null) return;
  11.                 editor1.destroy(); // 组件销毁时，及时销毁 editor ，重要！！！
  12.                 editor2.destroy(); // 组件销毁时，及时销毁 editor ，重要！！！
  13.             },

禁用富媒体

  1.     // 禁用
  2.                 if(this.target === 'edit'){
  3.                     this.editor.disable();
  4.                 }else{
  5.                     this.editor.enable();
  6.                 }

1、保留4位有效数字

  1. this.formCompute.CC.P = Math.pow(2.718281828459,temp_1).toPrecision(4);

2、watch的应用

https://www.cnblogs.com/jin-zhe/p/9319648.html

  1. <template>
  2.   <div>
  3.     <el-input v-model="demo"></el-input>
  4.     {{value}}
  5.   </div>
  6. </template>
  7. <script>
  8.   export default {
  9.     name: 'index',
  10.     data() {
  11.       return {
  12.         demo: '',
  13.         value: ''
  14.       };
  15.     },
  16.     watch: {
  17.       demo(val) {
  18.         this.value = this.demo;
  19.       }
  20.     }
  21.   };
  22. </script>
  1. <template>
  2.   <div>
  3.     <el-input v-model="demo.name"></el-input>
  4.     {{value}}
  5.   </div>
  6. </template>
  7. <script>
  8.   export default {
  9.     name: 'index',
  10.     data() {
  11.       return {
  12.         demo: {
  13.           name: ''
  14.         },
  15.         value: ''
  16.       };
  17.     },
  18.     computed: {
  19.       newName() {
  20.         return this.demo.name;
  21.       }
  22.     },
  23.     watch: {
  24.       newName(val) {
  25.         this.value = val;
  26.       }
  27.     }
  28.   };
  29. </script>

如果watch监测的是一个对象的话，直接使用watch是不行的，此时我们可以借助于computed计算属性来完成

3、vue中bus.$on事件被多次绑定

https://www.cnblogs.com/shirliey/p/11327126.html

4、js数组(找到第一个符合条件的元素)

https://blog.csdn.net/qq_43681948/article/details/106872531

5、JavaScript(ES 6)统计数组内符合条件数据的简洁方法

  1. 数组示例
  3. let users = [ {“name”:“张三”,“age”: 10},
  4. {“name”:“李四”,age: 14},
  5. {“name”:“王五”,age: 9},
  6. …
  7. ]
  8. 要求统计出数组里年龄大于10的人数。
  10. 方法一：使用filter和length
  11. const result = users.filter(u => u.aage > 10 ).length;
  13. 方法二：使用reduce
  14. const result = users.reduce((c, u) => u + (u.age > 10), 0)

6、JS中获取一个对象数组中的id的最大值方法

https://blog.csdn.net/chenludaniel/article/details/104564569/

  1. var lists = [{id:1,title:'22'},
  2.                  {id:1212,title:'2122'},
  3.                  {id:132,title:'2额122'}
  4.              ]
  5.  最终可以用一行代码
  6. var result = Math.max(...lists.map(x => x.id));

7、js动态生成唯一id

https://blog.csdn.net/zhengyinling/article/details/93619241?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.edu_weight&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.edu_weight

8、table 表头 有单位 想换行

https://blog.csdn.net/weixin_38779534/article/details/103022901

  1.    <el-table-column prop="time" :label="'时间\n'+  unitCon.timeUnit" align="center">
  2.                             </el-table-column>
  4.  .el-table .cell{
  5.         white-space:pre-line;
  6.         text-align: center;
  7.     }

9、js 数组对象中某个属性的最大值和最小值

https://blog.csdn.net/cargelzhong/article/details/81458610

  1. Math.max.apply(Math, array.map(function(o) {return o.value}))
  2. Math.min.apply(Math, array.map(function(o) {return o.value}))

10、echarts动态获取dataZoom滑动条改变后的数据

https://blog.csdn.net/weixin_42296333/article/details/108355448?utm_medium=distribute.pc_relevant.none-task-blog-title-4&spm=1001.2101.3001.4242

  1.  <div id='main2' style='width:600px;height:600px;background: #ddd'></div>
  4.  var myChart_y = echarts.init(document.getElementById('main2'));
  7. var option = {
  8.   tooltip: {
  9.       trigger: 'axis',
  10.       axisPointer: {    
  11.         type: 'shadow'   
  12.       },
  13.     },
  14.   dataZoom: [
  15.         {
  16.             show: true,
  17.             realtime: true,
  18.             // start: 30,
  19.             // end: 70,
  20.             // xAxisIndex: [0, 1]
  21.         },
  22.         {
  23.             type: 'inside',
  24.             realtime: true,
  25.             // start: 30,
  26.             // end: 70,
  27.             // xAxisIndex: [0, 1]
  28.         }
  29.     ],
  30.     xAxis: {},
  31.     yAxis: {},
  32.     series: [{
  33.         symbolSize: 20,
  34.         data: [
  35.             [10.0, 8.04],
  36.             [8.0, 6.95],
  37.             [13.0, 7.58],
  38.             [9.0, 8.81],
  39.             [11.0, 8.33],
  40.             [14.0, 9.96],
  41.             [6.0, 7.24],
  42.             [4.0, 4.26],
  43.             [12.0, 10.84],
  44.             [7.0, 4.82],
  45.             [5.0, 5.68],
  47.         ],
  48.         type: 'scatter'
  49.     }]
  50. };
  51. //显示图表
  52. let oldData = [
  53.             [10.0, 8.04],
  54.             [8.0, 6.95],
  55.             [13.0, 7.58],
  56.             [9.0, 8.81],
  57.             [11.0, 8.33],
  58.             [14.0, 9.96],
  59.             [6.0, 7.24],
  60.             [4.0, 4.26],
  61.             [12.0, 10.84],
  62.             [7.0, 4.82],
  63.             [5.0, 5.68],
  64.         ];
  66. myChart_y.setOption(option);
  67. myChart_y.on('datazoom',function(params){
  68.  let xAxis=myChart_y.getModel().option.xAxis[0];//获取axis
  69. let newData = [];
  70. let xRStar = xAxis.rangeStart;
  71. let yREnd = xAxis.rangeEnd;
  73. oldData.forEach(item=>{
  74.   if(item[0]>=xRStar && item[0] <= yREnd){
  75.     newData.push(item)
  76.   }
  77. })
  78. console.log(newData)
  81. })

11、vue mathjs使用方法（js 精度）

  1. npm install mathjs --save
  3. main.js中
  4. import * as math from 'mathjs'
  5. Vue.prototype.$math = math;
  7. 页面中
  8.  this.$math.format((this.upQ / value),4); //精度为4

12、el-table 根据返回的颜色代码 把颜色标出来

  1. <el-table-column prop="color" label="等级对应颜色"  align="center">
  2.                             <template scope="scope">
  3.                                 <div class="colorItem" :style="{background:scope.row.color}"></div>
  4.                             </template>
  5.                         </el-table-column>

13、用vue.js渲染后获取内容高度的问题

https://www.imooc.com/wenda/detail/496576
image.png

14、echarts Cannot read property ‘getAttribute’ of null

  1. if (document.getElementById('tmradLine2')) {
  2.                             this.$chart.line3('tmradLine2',scatters,left,right,xMin,yMin,xMax,yMax,xUnit,yUnit);
  3.                         }

15、数组比大小

  1. //this.xTimeMinData = Math.min.apply(Math,this.tableNewData .map(function(item) {return item.time}));
  3.  let se = [[3,5],[1,8],[0.1,3]]
  4. let ssew = Math.min.apply(Math,se .map(function(item) {return item[0]}));
  5. console.log(ssew) //0.1

15、vue中使用echarts中的扩展 ecStat.js

https://blog.csdn.net/qq_35366269/article/details/98945413

16.element-ui 清除form-item错误的显示

https://www.cnblogs.com/ygunoil/p/12336418.html

  1. this.$refs.ruleForm.clearValidate() 这个方法可以实现

17.el-input 自定义校验规则

https://blog.csdn.net/m0_37816134/article/details/102780985?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.edu_weight&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.edu_weight

https://blog.csdn.net/shulan5/article/details/103810317

18.el-step 上一步 和下一步

  1.    next() {
  2.                 if (this.active++ > 4) this.active = 0;
  3.             },
  4.             back() {
  5.                 --this.active;
  6.                 if (this.active < 0) this.active = 0;
  7.             }

19.组织架构树组件vue-org-tree

https://www.cnblogs.com/10ve/p/12573772.html
https://blog.csdn.net/weixin_38187317/article/details/86524258
http://www.mamicode.com/info-detail-2964091.html

  1. npm i vue2-org-tree
  3. main.js中
  4. import Vue2OrgTree from 'vue2-org-tree'
  5. Vue.use(Vue2OrgTree);
  6. import './assets/css/orgTree.css'; //组织树状图

20.通过文件流的形式下载word和window.location.href直接下

  1.        api.js
  2.        export const msdsDownload = (params) =>
  3.        { return request.post(`${base_new}/msds/download-word?${params}`,
  4.        { responseType: 'arraybuffer' }).then(res => res); };   
  7.                 let id = null;
  8.                 for (let i = 0; i < this.multipleSelection.length; i++) {
  9.                     id += this.multipleSelection[i].msdsId;
  10.                     if (i < this.multipleSelection.length - 1) {
  11.                         id += ",";
  12.                     }
  13.                 }
  14.                  const params = Qs.stringify({
  15.                     id: id
  16.                 });
  18.                 msdsDownload(params).then(res=>{
  19.                     console.log(res)
  20.                     let blob = new Blob([res], {
  21.                         type: `application/msword` //word文档为msword,pdf文档为pdf
  22.                     });
  23.                     let objectUrl = URL.createObjectURL(blob);
  24.                     let link = document.createElement("a");
  25.                     let fname = `我的文档`; //下载文件的名字
  26.                     link.href = objectUrl;
  27.                     link.setAttribute("download", fname);
  28.                     document.body.appendChild(link);
  29.                     link.click();
  31.                 })
      api.js
      let base_new = 'http://192.168.1.202:8780';
       export const downloadUrl = base_new;


      文件中
      import { downloadUrl }  from '../../../api/index'; //导出的地址

               let id = null;
                for (let i = 0; i < this.multipleSelection.length; i++) {
                    id += this.multipleSelection[i].msdsId;
                    if (i < this.multipleSelection.length - 1) {
                        id += ",";
                    }
                }
               window.location.href = downloadUrl+'/msds/download-word?id='+id

21.toExponential() 方法可把对象的值转换成指数计数法。

https://www.w3school.com.cn/jsref/jsref_toexponential.asp

22.element ui + vue项目翻页页码定义是number，但是出现”个“字

image.png
https://blog.csdn.net/qq_32881447/article/details/105602565
https://www.jianshu.com/p/82db266d82b7

23.localStorage.getItem得到的是[object Object] 的解决方案

https://www.cnblogs.com/ralapgao/p/11119063.html

localStorage.setItem("localKey", JSON.stringify(this.cartGroup))


方法1: JSON.parse(localStorage.getItem("localKey")
方法2: eval("("+localStorage.getItem("localKey")+")")

24.JS设置浏览器缩放比例

https://blog.csdn.net/weixin_42776111/article/details/108252759

main.js 中
var t = window.devicePixelRatio   // 获取下载的缩放 125% -> 1.25    150% -> 1.5
if(t != 1){   // 如果进行了缩放，也就是不是1
   document.body.style.zoom = -0.6 * t + 1.55;   // 就去修改页面的缩放比例，这个公式我自己算的，不准确，勉强。
}

25.使用pdf.js 来做pdf预览

https://www.cnblogs.com/linjiangxian/p/13730954.html

1. 下载pdfjs
官网：http://mozilla.github.io/pdf.js/getting_started/#download

image.png
2. 放入项目中
将下载下来的文件解压缩后，将里面的pdf文件夹拷贝到项目中的public文件夹中
6 elementUI学习 - 图4
3. 页面中使用

window.open('/pdf/web/viewer.html?file=' + path);//path是文件的全路径地址
api/index.js中
let base_new = 'http://myrc-soft.qicp.vip:54262';
export const downloadUrl = base_new;

sds.vue
 // 预览pdf附件
            viewFile(index,row){
                localStorage.setItem("filename", 'SDS-'+row.chName+'-附件.pdf');  //解决下载pdf时名字都是document.pdf
                let path = downloadUrl+'/attachment/view/sds/'+ row.msdsId;
                window.open('/pdf/web/viewer.html?file=' + path); //path是pdf文件的全路径地址
            },

 viewer.js
   let defaultFilename = localStorage.getItem("filename");

image.png
4. 出现的问题
过程中，出现了一次报错 “file origin does not match viewer’s”
原因：跨域
解决方法: 直接注释掉web/viewer.js中的2183到21856这几行，不去判断跨域即可

if (origin !== viewerOrigin && protocol !== 'blob:') {
    throw new Error('file origin does not match viewer\'s');
}

image.png

25.四元运算符

https://blog.csdn.net/weixin_33883178/article/details/85886038?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.control

var state = null;

var display_state = (state == null ? "未用" : (state == true ? "在用" : "停用"))

//display_state
//"未用"
一般三元运算符就够用了，

但是此时有个需求：state有3个状态，{null,true,false}

null→未用

true→在用

false→停用

26.vue 使用 el-dialog 获取元素为null的解决方法

https://blog.csdn.net/qq_36926583/article/details/107671734

this.$nextTick(function() {
        let qrBox = document.getElementById('qrcode')    // 获取到div元素
    })

27.Vue + Element table中selection复选框禁用某一行

https://blog.csdn.net/weixin_41562512/article/details/88344550

 <el-table-column
          type="selection"
          :selectable='checkboxT'
          width="28">
        </el-table-column>

         //复选框
      checkboxT(row, rowIndex){
        if(rowIndex==0){
//      if(row.lie =='1'){
          return false;//禁用
        }else{
          return true;//不禁用
        }
      },

28.echarts图片转为base64

 //echarts转base64图片
            chartsBase64(id){
                let baseCanvas = document.getElementById(id).getElementsByTagName('canvas')[0];
                let width = baseCanvas.width;
                let height = baseCanvas.height;
                let ctx = baseCanvas.getContext("2d");
                ctx.drawImage(baseCanvas,width,height);
                return baseCanvas.toDataURL();
               // console.log(baseCanvas.toDataURL())
               // this.url = baseCanvas.toDataURL()
            },

29.vue dom 结构转为base64

https://www.jianshu.com/p/b70b52091b49?utm_campaign=haruki&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

npm install html2canvas -d

30.el-input输入框中只能输入数字，并且取小数点后两位

https://blog.csdn.net/qq_30405009/article/details/110956379

<el-input
          v-model.trim="setting.satisfiedRateIndex"
          style="width: 150px"
          @keyup.native="
            setting.satisfiedRateIndex = oninput(setting.satisfiedRateIndex)
          "
        ></el-input>

oninput(value) {
      console.log(value, typeof value, value.replace(/[^\.\d]/g, ""));
      let str = value;
      let len1 = str.substr(0, 1);
      let len2 = str.substr(1, 1);
      //如果第一位是0，第二位不是点，就用数字把点替换掉
      if (str.length > 1 && len1 == 0 && len2 != ".") {
        str = str.substr(1, 1);
      }
      //第一位不能是.
      if (len1 == ".") {
        str = "";
      }
      if (len1 == "+") {
        str = "";
      }
      if (len1 == "-") {
        str = "";
      }

      //限制只能输入一个小数点
      if (str.indexOf(".") != -1) {
        let str_ = str.substr(str.indexOf(".") + 1);
        if (str_.indexOf(".") != -1) {
          str = str.substr(0, str.indexOf(".") + str_.indexOf(".") + 1);
        }
      }
      //正则替换
      str = str.replace(/[^\d^\.]+/g, ""); // 保留数字和小数点
      str = str.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/, "$1"); // 小数点后只能输 2 位
      return str;
    },

31.vue实现简单防抖（watch input）

https://blog.csdn.net/weixin_30741653/article/details/99454352?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_baidulandingword-1&spm=1001.2101.3001.4242

<input type="text" v-model="searchStr">


const app = new Vue({
    el:"#app",
    data:{
        searchStr:"",
        fun:null
    },
watch:{
    searchStr: function (str) {
        if (typeof str ==='string'){
            if (str.trim().length!==0){
                this.debounce(this.changeStr,1000);
            }else {}
        }
    }
},
methods:{
    debounce:function(fn,wait){
        if (this.fun!==null){
            clearTimeout(this.fun)
        }
        this.fun = setTimeout(fn,wait)
    },
    changeStr:function(data){
        console.log(data)
    },
}

效果：当我持续快速向input输入时，只有停顿1秒才执行一次事件

32、js 多条件多数据筛选

https://segmentfault.com/q/1010000013394483

var conditionArr=[{
        name:'广州',
        type:'area'
    },{
        name:'一本',
        type:'batch'
    }];

    var dataArr=[{
        name:'广州大学1',
        area:'广州',
        batch:'一本'
    },{
        name:'广州大学2',
        area:'广州',
        batch:'一本'
    },{
        name:'广州大学3',
        area:'深圳',
        batch:'一本'
    },{
        name:'广州大学4',
        area:'深圳',
        batch:'二本'
    },{
        name:'广州大学5',
        area:'广州',
        batch:'二本'
    },{
        name:'广州大学6',
        area:'广州',
        batch:'二本'
    }];

    // conditionArr是筛选的条件（动态变化的），当conditionArr多一个数组时，dataArr中的每个对象就会多一个属性【此处简化属性，刚开始就有对应值】

var temp=[],bool; 
for(var i=0;i<dataArr.length;i++){ 
  bool = true
  for(var j=0;j<conditionArr.length;j++){ 
    if (dataArr[i][conditionArr[j].type] !== conditionArr[j].name){ 
      bool = false; 
    } 
  } 
  bool && temp.push(dataArr[i])
} 
console.log(temp);

33.js 数组对象有多层数据，只保留两层的解决办法

https://blog.csdn.net/qq_42292873/article/details/109306573

34.el-date-picker 时间选择器回显后无法修改

https://blog.csdn.net/weixin_42769637/article/details/107815831
image.pngthis.$set(this.form,”alldate”,[this.form.startdate,this.form.endate])

35.在vue项目中 如何定义全局变量 全局函数

https://www.cnblogs.com/kewenxin/p/8619240.html

使用方式2：

36.vue 打印

https://www.cnblogs.com/lovebear123/p/13860938.html

37、echarts 套娃柱形图

image.png

option = {
    tooltip: {
                trigger:"axis",
                formatter:"{a1}<br/>{b1}：{c1}%"
            },
            legend: {
                data:['优秀','良好','一般','实际']
            },
            grid: {

            },
            xAxis: [{

                data: ["衬衫","羊毛衫","雪纺衫","裤子"]
            },{
                type: 'category',
                axisLine: {show: false},
                axisTick: {show: false},
                axisLabel: {show: false},
                splitArea: {show: false},
                splitLine: {show: false},

            },{
                type: 'category',
                axisLine: {show: false},
                axisTick: {show: false},
                axisLabel: {show: false},
                splitArea: {show: false},
                splitLine: {show: false},

            }


            ],
            color:['#f9caca','#bfbfbf','#7f7f7f','#de1a37'],
            yAxis: [{
                  axisLabel:{
                    formatter:"{value}%"
                }

            }],
            series: [{
                name: '优秀',
                type: 'bar',
                barWidth: 100,
                barGap: '-100%',
                data: [100, 100, 100, 100]
            },
            {
                name: '良好',
                type: 'bar',
                barWidth: 100,

                data: [78, 87, 77, 80]
            },
            {
                name: '一般',
                type: 'bar',
                 barWidth: 100,

                data: [50, 52, 48, 59]
            },
            {
                name: '实际',
                type: 'bar',
                 barWidth: 50,
                  xAxisIndex: 2,
                data: [88, 97, 38, 62]
            }]


};

38.如何解决el-table出现一条线

.el-table::before{     z-index: inherit;}

https://blog.csdn.net/weixin_43900414/article/details/108261108

39.上传格式限制

action
class=”upload-basic”
:on-change=”handlePreview”
multiple
:auto-upload=”isAuto”
:show-file-list=”false”
ref=”upload”
accept=”.pdf,.PDF”
>

点击上传附件