最近测试提交了一份报告，当回车的时候页面刷新，并且导航栏多出个问号。

找遍自己写的代码仍然没有找到问题，因为我本身对enter键也进行了处理的。
代码如下

<el-form :inline="true" class="searchForms searchCommon" @submit.native.prevent>    
    <el-form-item label="关键字" class="keyword">
      <el-input v-model="keyword" clearable placeholder="输入编号或名称" style="width: 140px;" @keyup.enter.native="handelEnter"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" icon="search" :loading="isQuery" @click="searchHandler">查询</el-button>
    </el-form-item>
  </el-form>

最后发现一个结论。所以我们需要对原生的form表单提交进行处理，@submit.native.prevent

结论：当表单中只有一个input输入元素时，点击enter键，form表单会自动提交。

前言

用户上传图片，利用后端返回的数据实现图片展示，
实现效果：

实现代码:

<el-form-item label="印章:" prop="imgFile">
   <el-upload
     class="upload-demo"
      drag
      v-model="addForm.imgFile"
      action=""
      :before-upload="handleBeforeUpload"
      :http-request="handleUpload"         
      accept=".jpg,.png"
      multiple>
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过2kb</div>
    </el-upload>         
  </el-form-item>

 <div v-if="item.prop === 'images' && scope.row[item.prop] !== null">
    <img :src="'data:image/jpg;base64,' + scope.row[item.prop]" alt="印章">              
 </div>
 <span v-else>{{ scope.row[item.prop] }}</span>

<script>
data () {
    return{
    addForm: {
        imgFile: ''
    }
},

handleBeforeUpload (file) {
      if (file.size > 2 * 1024) {
        this.$message({
          type: 'warning',
          message: '选择文件过大啦~~'
        })
        return false
      }
    },
handleUpload (data) {
  this.addForm.imgFile = data.file
}
</script>

运行项目时，报错node_moduleschromedriver Command failed.

在运行公司的一个项目时，报错如下，

大概意思就是那个路径下的chromedriver_win32.zip损坏了，需要重新下载好的替换到相应的路径下，

下载路径：https://chromedriver.storage.googleapis.com/2.40/chromedriver_win32.zip

下载完后解压缩，放到对应路径即可

解决啦。

我不怕万人阻拦，我只怕自己投降

前言

先上实现效果，聚集了ElementUI树形组件的很多属性，比如，懒加载，selectbox，label前添加图标，将文件夹不能点击，只有图层才可以点击。

上源码

实现了时间日期组件限制选择，生产日期不能大于结束日期。

<template>
  <div class="hello">       
   {{starttime}}
    <el-date-picker v-model="starttime" :picker-options="startTime" type="date" value-format="yyyy-MM-dd"></el-date-picker>
    {{endtime}}
    <el-date-picker v-model="endtime" :picker-options="endTime" type="date" value-format="yyyy-MM-dd"></el-date-picker>
  </div>
</template>

<script>
export default {
  data () {
    return {
      starttime: '',
      endtime: '',
      startTime: {
        disabledDate: time => {
          if (this.endtime) {
            return (
              time.getTime() > new Date(this.endtime).getTime()
            )
          } else {
            return time.getTime() > Date.now()
          }
        }
      },
      endTime: {
        disabledDate: time => {
          if (this.starttime) {
            return (
              time.getTime() < new Date(this.starttime).getTime()
            )
          } else {
            return time.getTime() > Date.now()
          }
        }
      }
    }
  }
}
</script>

单个输入框的

<el-date-picker
   v-model="value1"
   type="date"
   placeholder="选择日期"
   :picker-options="pickerOptions0">
</el-date-picker>

情景1: 设置选择今天以及今天之后的日期

data (){
   return {
       pickerOptions0: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;
          }
        },  
   }     
}

情景2: 设置选择今天以及今天以前的日期

data (){
   return {
       pickerOptions0: {
          disabledDate(time) {
            return time.getTime() > Date.now() - 8.64e6
          }
        },  
   }     
}

在做项目的时候，产品说我点击变化需要有个过渡，结合实际最终实现了效果，来mark一下。
这里还涉及到动态绑定类

<template>
  <div class="container TrajectoryTable"
    :style="'width:' + docWidth + '%;' + 'height:' + docHeight + 'px'"
    v-loading.body="dialogLoading" 
    element-loading-text="拼命加载中">
    <div class="tableTop">
      <div style="float: right;">
        <el-button @click="enlargeTable">
          <i class="iconfont" :class="icon === true ? 'icon-caozuo_suoxiao' : 'icon-caozuo_quanpingfangda'"></i>
        </el-button>
      </div>
    </div>
    <div class="mainTable">
      <table-form 
        v-loading.body="isLoadingTableData"
        :colData="colData" 
        :data="tableData" 
        :colWidth="120"
        :max-height="height"
        :row-key="rowKey"
        :submiting="submiting"
        :isShowOper="isShowOper"
        :stripe="true"
        border 
        :sortable="false"
        >  
        <el-table-column
        type="index"
        label="序号"
        width="50">
        </el-table-column>    
        <el-table-column
          v-for="item in colData"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :align="item.align"
          :sortable="false">     
        </el-table-column>       
      </table-form>
    </div>
  </div>
</template>

<script>
import TableForm from '@/components/Table.vue'

export default {
  name: 'TrajectoryTable',
  components: {
    TableForm
  },
  data () {
    return {
      isLoadingTableData: false, // 懒加载表单
      dialogLoading: false, // 懒加载整个页面
      colData: [],
      tableData: null,
      isShowOper: false,
      rowKey: 'domainId',
      height: '150',
      docWidth: '50',
      docHeight: '200',
      sortable: true,
      submiting: false,
      icon: false
    }
  },
  mounted () {
    this.inits()
  },
  methods: {
    inits () {     
      this.colData = [
        {prop: 'laupTime', label: '时间', width: '200', sortable: true, align: 'center'},
        {prop: 'targetName', label: '位置', width: '200', sortable: true, align: 'center'},
        {prop: 'eventTitle', label: '速度', sortable: true, align: 'center'},
        {prop: 'status', label: '状态', width: '300', sortable: true, align: 'center'},
        {prop: 'audistatus', label: '里程', width: '90', sortable: true, align: 'center'}
      ] 
      this.tableData = []    
    },
    // 点击变化函数
    enlargeTable () {
      if (this.icon) {
        this.docWidth = '50'
        this.docHeight = '200'
        this.height = '160'
        this.icon = false
      } else {
        this.docWidth = '90'
        this.docHeight = '500'
        this.height = '450'
        this.icon = true
      }     
    }
  }
}
</script>

<style lang="scss">
.TrajectoryTable {
  width: 50%;
  height: 200px;
  background: rgba(80, 92, 100, 0.8);
  position: absolute;
  bottom: 2px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  border-radius: 4px;
  padding: 0 8px;
  transition: all 0.5s; // 划重点，过渡函数

  .tableTop {
    height: 40px;
    padding: 1px;

    .el-button {
      padding: 8px 10px;
    }
    .el-button+.el-button {
      margin-left: 0px;
    }
  }
  .mainTable {
    padding: 0;
    overflow: auto;
    // margin-top: 30px;
  }

}
</style>

实现效果：

最近需要完成一个这样的效果，

在多选框中选中后需要的不是label而是传相应的id，看了一下官方文档并没有这样的写法，之前select选择器的时候就有了label和value互相切换的操作，所以借鉴一下，没想到成了，代码如下。

<template>
  <div class="layerManegement">
  <div class="headAdd">选择图层添加或移除</div>
  <hr>
  <el-checkbox-group v-model="checkedOptions" @change="handleCheckedCitiesChange">
    <el-checkbox v-for="item in layers" :label="item.value" :key="item.value">{{item.label}}</el-checkbox>
  </el-checkbox-group>
  </div>
</template>
<script>
import Api from '@/api/Index.js'
export default {
  name: 'layerManegement',
  data () {
    return {
      checkAll: false,
      checkedOptions: [], 
      layers: [{
        value: '',
        label: ''
      }],
      isIndeterminate: true
    }
  },
  mounted () {
    this.findLayerList() // 调用接口
  },
  methods: {
    handleCheckedCitiesChange (value) {
      let checkedCount = value.length
      this.checkAll = checkedCount === this.layers.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.layers.length
      this.$emit('handle-change-layer', this.checkedOptions)  //我这里需要将值传给父组件所以用了emit
    },
    findLayerList () {
      Api.findLayerList()
        .then(data => {
          if (data.status === 0) { 
            this.layers = [] 
            this.layers = data.data                
          } else {
            this.$message({
              type: 'warning',
              message: '获取数据失败'
            })
          }
        })
        .catch(res => {
          this.$message({
            type: 'error',
            message: '请求数据失败'
          })
        })
    }
  }
}

</script>
<style lang="scss">
.layerManegement {
  width: 100%;
  .headAdd {
    color: white;
  }

}

</style>

首先你的电脑需要安装nodejs

具体步骤见文章
https://ricesgui.github.io/2018/09/11/%E4%BB%8E%E9%9B%B6%E6%90%AD%E5%BB%BA%E4%B8%80%E4%B8%AAvue%E9%A1%B9%E7%9B%AE/

然后就是搭建我们的主角react项目啦

运用create-react-app插件

安装命令：
npm install -g create-react-app
等几分钟得到下图结果就是安装成功，可以进行下一步操作。

进入到你想要放置项目的文件夹目录打开命令行界面，
安装命令：
create-react–app react-demo

如下图，即安装成功。

我们来看一下生成的文件目录

出现场景，在搜索栏选择日期后，搜索成功，清空日期再搜索，默认搜所有数据时报错，因为我没有选择日期

数据绑定

数据绑定时可以用
:src=”‘http://‘ + item”来进行数据字段添加

vue2.0实现1图片加载失败显示默认图片

<script>
    export default {
        data() {
            return{
                error: 'thie.src="' + require('assets/images/error.png') + '"'
        }
    }
</script>