Vue + Element-UI 的踩坑记录

1.DatePicker组件，日期格式选择下，如果默认给当前日期 new Date()，数据在提交的时候会提交前一天的日期数据，

 <el-date-picker
                        v-model="form.date_picker_start"
                        :type="date_picker_type"
                        @change="calTbDateTrend"
                        :format="date_picker_format"
                        :picker-options="pickerOptions"
                        :clearable="false"
                        style="width:150px">
</el-date-picker>

解决：指定value-format=‘’，例如 value-format=‘yyyy-MM-dd’

 <el-date-picker
                        v-model="form.date_picker_start"
                        :type="date_picker_type"
                        @change="calTbDateTrend"
                        :format="date_picker_format"
                        :value-format="date_value_format"
                        :picker-options="pickerOptions"
                        :clearable="false"
                        style="width:150px">
</el-date-picker>
 export default {
        mounted() {
          //pass
        },
        data() {
            return {
                form: {
                    date_picker_start: new Date(new Date() - 86400 * 1000)
                },
                date_picker_type: 'date',
                date_picker_format: 'yyyy-MM-dd',
                date_value_format: 'yyyy-MM-dd',
                pickerOptions: {
                    firstDayOfWeek: 1
                }
            };
        },
	 methods:{
		 //pass
	 }
 }
	 //pass...

设定了 value-format 属性之后，提交时 该参数的数据类型就变成字符串了，不再是date对象了，所有如果有需要 可以在前端再加个判断

例如 form.date_picker_start instanceof Object
if ( form.date_picker_start instanceof Object === false){
	//简单的做个判断，如果不是对象就转成对象形式
	form.date_picker_start = new Date(form.date_picker_start);
}

2.Table组件，我们用的动态表头的形式，每次查询加载表格的时候，表头数据是根据选项来动态加载的，这样的情况导致了前端展示数据不稳定，出现了点了查询但是没有数据的情况，需要再点一次查询 或者 鼠标移动到表格区域数据才会正确加载进来。（原因应该就是表头是动态加载的，每次赋值的时候上一次绑定的值还在，与数据绑定的prop不一致导致的）所以每次查询的时候 需要先清除表头的数据。

<!--代码举例-->
 <el-table :data="tableData" stripe empty-text="暂无数据" v-loading="loading" element-loading-text="拼命加载中...">
	 <el-table-column v-for='item in tableHeader' :label="item.label" :prop='item.prop' :fixed="item.prop|needFixed" :width='160' :key="item.id" align="center">
			<template slot-scope="scope">
					<span class="cate-name" v-if="item.prop == 'cate_name'" :label="scope.row[item.prop]" @click="jumpToDetail($event)">{{scope.row[item.prop]}}</span>
					<span v-else>{{scope.row[item.prop]}}</span>
			</template>
		 <el-table-column v-for="item1 in item.children" :label="item1.label" :prop='item1.prop' :min-width='140' :key="item1.id" align="center">
			 <template slot-scope="scope">
				 <div align="right">{{scope.row[item1.prop]|toThousands}}</div>
			 </template>
		 </el-table-column>
	 </el-table-column>
	 <div slot="empty">
		 <div v-if="loading">
			 <p class="loading"></p>
		 </div>
		 <div v-else><p class="nodata">
			 <span class="nodata-text">暂无数据</span>
			 </p>
		 </div>
	 </div>
</el-table>

 export default {
        mounted() {
          //pass
        },
        data() {
            return {
                form: {
                    date_picker_start: new Date(new Date() - 86400 * 1000)
                },
                date_picker_type: 'date',
                date_picker_format: 'yyyy-MM-dd',
                date_value_format: 'yyyy-MM-dd',
                pickerOptions: {
                    firstDayOfWeek: 1
                }
            };
        },
	 methods:{
		getList() {
                this.loading = true;
                this.tableHeader = [];###动态表头数据清除,如果不加这一行 在变换条件多次调用该方法的时候表头的数据会出现不显示的情况。
                this.tableDetailHeader = [];###动态表头数据清除
                this.$axios.get('xxxx', {params: this.form}).then(res => {
                    if (res.data.error === 0) {
                        //表格数据
                        this.tableHeader = res.data.data.total_table_header;
                        this.tableDetailHeader = res.data.data.detail_table_header;
                        this.tableDetailData = res.data.data.detail_table_data;
                        this.tableData = res.data.data.total_table_data;
                        //折线图数据
                        this.manTitleList = res.data.data.man_title_list;
                        this.manLegendData = res.data.data.man_legend_data;
                        this.manXaxisData = res.data.data.man_xaxis_data;
                        this.manSeriesData = res.data.data.man_series_data;
                        //加载折线图
                        if (this.manTitleList.length > 0) {
                            this.handleClick();
                            this.drawLine();
                        }
                    }

                });

            },
	//pass
	 }
 }

解决：每次查询的时候 表头数据的变量也重置一下。