1.el-table中

data是显示的数据，但是必须是一个数组；设置type="index"即可显示从1开始的做引号，当然也可以给该索引绑定自定义的方法，设置让它变化的方法

<el-table-column
 type="index"
 :index="indexMethod">
</el-table-column>
methods: {
 indexMethod(index) {
 return index * 2;
}

table的尺寸通过size进行设置，medium/small/mini。给el-table-column添加prop属性，对应列内容的字段名；其值使用作用域插槽，例如：

<template slot-scope="{ row }">
    <el-input v-model="row.craftTypeName"></el-input>
 </template>

v-model实现双向数据绑定，表格中使用表单的input输入框中的值，多行数据使用作用域插槽，多行数据可以使用上面的这种方式渲染。

使用作用域插槽，slot-scope="scope",scope中可以获取当前的表格所在的行，例如:scope.$index;当前行的内容，例如scope.row；作为实参可以传入相关的方法，在点击该方法时，调用实参传入的相关方法。

Element-Ui中调整表单的某些列的宽，一般通过设置列的width和min-width即可设置表格列的宽。表格右侧一般设置固定定位fixed的相关操作，例如：删除，编辑，上移，下移等，会使表格右侧是边框没有显示，其余的边框可以显示，这时去掉这个固定定位就会显示了。当然，前提是表格要有border;可以给表格的el-table-column设置align即可实现居中显示。

2.el-form

表单需要参数model表单数据对象，通过:model="对象"；el-form-item中使用prop属性，传入 Form 组件的 model 中的字段，在使用 validate、resetFields 方法的情况下，该属性是必填的；el-input中使用v-model实现双向数据绑定，传入的是对象中的某个字段，例如: v-model="processInstructionsInfo.clipDes";通常可以设置el-input的输入最大长度，例如:maxlength="500",style="width:60%",rows="9"设置行数，size用于控制该表单内组件的尺寸,medium / small / mini为三个值。

综上所述，表格中:data="数组"与el-table-column中prop="craftTypeName"相对应，如果表格中不用template中的scope.row进行渲染的话，默认就用prop属性进行渲染；表单中 :model="对象"与el-form-item中prop属性相对应，适用于校验的情况，el-input中v-model实现双向数据绑定。

Element-Ui中一些样式不能改，不能有效显示，可以使用::v-deep 添加的新类名你要添加的原生的类名{样式}，例如:

::v-deep .text-wrap .el-textarea__inner {
  resize: none;
}
//添加页面滚动条  在垂直方向上
.process-instructions {
  overflow-y: auto;
}

3.项目中遇到的一些小问题

splice()方法返回的是一个数组，然后再取出某个值。
v-loading="loading"需要获取后端接口数据到页面上进行显示，所以在请求发起至数据渲染页面的这段时间，为页面提供一个 loading 加载是极为必要的。loading是一个布尔值。使用v-loading在接口未请求到数据之前，显示加载中，直到请求到数据后消失。在data 中定义初始化，loading: false，同时在mounted()中将 this.loading设置为true,再去请求接口,在接口的回调函数中，将this.loading设为false`，到达加载动画效果。
数组.forEach()返回的是undefined，而数组.map()返回的是一个新数组，不修改原数组。

4.双向绑定aync

我们可能需要对一个 prop 进行“双向绑定”。vue中我们经常会用v-bind(缩写为:)给子组件传入参数。子组件this.$emit("update:title",newTitle),然后父组件可以监听那个事件并根据需要更新一个本地的数据prototype。例如:

<text-document v-bind:title="doc.title" v-on:update:title="doc.title=$event">
</text-document>

<text-document v-bind:title.sync="doc.title"></text-document>

注意:.sync修饰符的v-bind不能和表达式一起使用。当我们用一个对象同时设置多个prop的时候，也可以将这个.sync修饰符和v-bind配合使用。

<text-document v-bind.sync="doc"></text-document>

5.实现深克隆，去除共用数据造成的数据污染

const obj1 = JSON.parse(JSON.stringify(obj));实现深度克隆，确保父组件向子组件传参时，传过来的对象是引用数据类型，不会引发在输入时和父组件的列表数据共用一个地址，从而在输入的时候让父组件的数据也在变化，造成了父组件的数据污染了，这样做就不会同步改变父组件的数据了。

6.保存后刷新

在一个页面中，上面引用一个组件，该组件是封装好的一个组件，引用该组件时设置ref="template"；下面又复用几个组件，在下面复用的几个组件里边，保存后需要刷新页面，因此需要在子组件里使用this. $emit()触发，在父组件的页面处使用this.$ on()进行监听，在监听的方法中使用this.$refs["template"].getTableList();即可完成刷新。(其实最本质的操作就是多调用接口)

7.在下拉列表单选以及多选时遇到的问题

value 属性规定在表单被提交时被发送到服务器的值。正常对于一个列表来说，后端返回一个整数的数组，即下标作为key;当然了如果后端对于一个列表返回的是一个字符串数组，就是把那些数组的下标转为了字符串，那么这个value就要用index,而不能用Number(index),要让value的值和返回的字符串数组的下标值相对应，要不然就会在页面显示后端返回的字符串数字。

<el-col :span="20">
<el-form-item label="安全类别：" prop="safeCategory">
<el-select v-model="editDialogForm.safeCategory">
<el-option
  v-for="(item, index) in SECURITY_CATEGORY"
  :key="Number(index)"
  :label="item"
  :value="Number(index)"
>
</el-option>
</el-select>
<el-button @click="handleCopy(editDialogForm.safeCategory,3)" type="text" size="small">复制</el-button>
</el-form-item>
</el-col>

<el-col :span="20">
<el-form-item label="洗涤说明：" prop="washingExplainList">
<el-select v-model="editDialogForm.washingExplainList" multiple>
<el-option
  v-for="(item, index) in WASHING_INSTRUCTIONS"
  :key="index"
  :label="item"
  :value="index"
>
</el-option>
</el-select>

<el-button @click="handleCopy(editDialogForm.washingExplainList,4)" type="text" size="small">复制</el-button>
</el-form-item>
</el-col>

第4天Element-Ui组件使用时遇到的问题以及开发遇到的小问题