vue2与element开发1. v-viewer 2.dialog （1）dialog内部出现滚动条 1、设置 ove

1. v-viewer

2.dialog

（1）dialog内部出现滚动条

1、设置 overflow-y 、给dialog里面的内容给固定高

 .el-dialog__body {
      height: 35rem;
      overflow-y: auto;
    }

dialog框加属性： :lock-scroll="false"
dialog：这个组件注册后，它的关闭默认时display:none。在进行dialog嵌套时，打开第一个dialog框，嵌套的dialog组件会被挂载上，导致组件的生命周期执行（create、mounted）。

（2）嵌套的dialog在第一个dialog打开后生命周期就会执行（请求的数据会被渲染、保存）：

缺点-》如果每个请求做了loading，会倒是loading转很久。进入组件生命周期不处理不会执行，不方便。 提示：：想打开嵌套的dialog在触发加载页面函数：缺点每次进去都会重新加载请求

3.对象的指向与拷贝

对象、数组：引用。---》与props一起用很方便（props不能改变赋值，但是能改变对象和数组里面的数据（增、删、改））
拷贝：用于不想子组件对props里面的值改变，影响父组件时。{...{}}、[...[]]、Object.assign(obj1,obj2)、lodash的cloneDeep()

4.element的table

（1）、实现单选的radio：利用插槽-》1、注意给不同的label。2、v-model绑定value。3、利用{{''}}使label不显示。

            <el-table-column width="60" align="center" header-align="center">
              <template slot-scope="scope">
                <el-radio
                  :label="scope.row.id"
                  v-model="seletionValue"
                  @change="handleSelectionChange(scope.row)"
                  style="cursor: pointer"
                  >{{ '' }}</el-radio
                >
              </template>
            </el-table-column>

（2）、切换页面要求要选中之前内容

（3）、 table表格选择的回显：

注意：1、要在table页面数据请求数据更新后使用-》this.$nextTick(()=>{})。2、toggleRowSelection(outerItem,true)：为true，必须传入得到后台的对象中数据，不然不会生效

(4):格式化table里面的内容

            {
              label: '状态',
              prop: 'active',
              width: '',
              formatter: (row, column, cellValue) => {
                return cellValue == true ? '启用' : '禁用';
              },
            },

5.form表单

（1）、增加、编辑、复制用同一个组件：

总结：1、父组件通过props传要编辑、复制的值；新增可以自己定义一个对象(格式与每行的值一样：值为空就行)。 2、父组件：新增、编辑、复制按钮用同一个方法（传不同的标识）打开公用的组件。

  <el-button size="small" @click="handleOpen('edite')">编辑</el-button>
 <el-button type="primary" size="small" @click="handleOpen('add')">新增</el-button>
  <el-button size="small" @click="handleOpen('copy')">复制</el-button>

3、在handleOpen方法中，在打开前要调用表单验证的。编辑需要浅拷贝后复制，避免在表单中改变就把table里面的数据改变了。 4、子组件（dialog）在点击确定改变props的数据。

  // 点击确定按钮
      submitHandle() {
        let type = this.type;
        this.$refs.formName.validate((valid) => {
          if (valid) {
            if (this.userData.sysEmpOid) {
              this.formData.userOid = this.userData.sysEmpOid;
            }
            if (this.workGroupData.sysPositionOid) {
              this.formData.workGroupOid = this.workGroupData.sysPositionOid;
            }
            if (type === 'add') {
              this.formData.editRule = '编辑';
              this.formData.ruleDetail = '';
              this.$emit('addData', { ...this.formData });
              this.$message({
                type: 'success',
                message: `添加成功！`,
                duration: 2000,
              });
            } else if (type === 'edite') {
              Object.assign(this.formDatas, this.formData);
              this.$message({
                type: 'success',
                message: `编辑成功！`,
                duration: 2000,
              });
            } else if (type === 'copy') {
              this.$emit('addData', { ...this.formData });
              this.$message({
                type: 'success',
                message: `复制添加成功！`,
                duration: 2000,
              });
            }
            this.visible = false;
          } else {
            return false;
          }
        });
      },
      // 新增按钮
      addTable(type) {
        this.type = type;
        this.visible = true;
      },
      copyTable(type) {
        this.type = type;

        this.visible = true;
      },
      // 编辑按钮
      editeTable(type) {
        this.type = type;
        this.visible = true;
      },

（2）、表单验证函数：

注意：在使用封装的公用组件的时候，表单验证函数在公用函数里面-》this.$refs.当前组件.公用组件.resetFields()
resetFields()会清空错误验证的提示但是也会清楚数据-》同一个组件的9个有数据的表单变成4个空的表单，会触发验证的提示，但是数据为空。解决：1、如果没有数据表单验证被触发，可以直接用这个函数清楚验证。2、从组件上解决，给组件加key，使组件不会重复利用（相当于是个新的组件新的ref）。
数字验证v-moudle.number/.trime

6. watch总结。

(1)、当组件生命周期提前执行时（比如打开dialog框没有执行），1、可以用watch监听父组件传的值来执行页面加载函数。2、可以用v-if重新加载组件。

(2)、子组件根据父组件传过来的值，动态的生成配置。实习做看板配置：新增和编辑用同一个页面。1、新增：监听父组件传过来的formData,生成对应的配置文件。2.新增：在根据第一个表单触发后，在生成对应index的配置文件。并向formdata对应的index对象中，添加一个标识的selectTar为编辑作准被。3、编辑：监听父组件传过来的formData,并遍历（selectTar是否存在），存在然后在调用一个函数函数生成配置文件。

7. 同一组件怎么重复利用：

（1）：给组件加上key（就不会是相同的组件重复利用，不同的key标识后就是不同的组件），ref最好与key对应

（2）：引入同一个组件使用不同名字注册

10.loadsh.js库 11.moment.js库

vue2与element开发