Element UI 细节方面 + 总结

入职快半个月。公司业务也多多少少了解，期间的任务也不多，工作安排也不是很理想。

在这首先感谢一下我的组长，帮我解决了很多问题。也是组长带我到现在，再次感谢。

公司在做iPad端应用，我上手时项目已经开发一半，技术用到vue+element UI。

前面说到效果，各个功能实现，这几个功能也磨上了快半个月，之前并没有接触过element UI,以为那就是复制粘贴的事，其实并没有，还有很多细节方面的事需要自己去体会。

下面几个问题就是在项目中所遇到的问题。在这里总结一下，相信这个总结一定会有帮助。

问题：

使用element ui dailog弹出框时，弹出框并不在vue挂载的app里，自定义样式覆盖不了默认样式。

解决：

把自定义样式写在了全局下，并使用了父级元素包裹，样式生效。

问题：

引用element UI 里的dialog弹框，弹框出现才会加载里面的Dom，js在Dom还没有时，已经开始执行，无法获取并操作Dom元素

解决：

不使用element UI 里到dialog弹框，手写html元素，固定Dom结构，让先加载Dom，后执行 js操作元素。
element UI dig log弹框，使用了open回调，动态生成了Dom之后，执行open里的方法，open里的方法是立即执行
不把js写在父组件内，单独抽离为子组件即可，点击出现弹框直接加载子组件，就不会出现执行问题

问题：

element ui 给表单加入验证，在el-col标签里面加入

解决：

首先给需要表单验证的整个大form加入：model，：rules，
然后给需要验证的输入框加入el-form-item标签包裹，加入prop
再给vue data中加入rules 规则，rules中是定义的prop
再给methods中写入逻辑（点击提交时，触发方法执行） this.$refs['inHosForm'].validate((valid)会根据prop判断表单是否填写

 1. <el-form ref="inHosForm" label-width="80px" label-position="left" class="form" :model="inHosData" :rules="rules">
 
 // :model 是定义v-model表单可输入的字段，:rules 是验证规则
 2. <el-col :span="12" class="collabel">
               <el-form-item label="可靠程度" prop="reliable">
                <el-input size="mini" class="inputWidth1" placeholder="请填写" v-if="!previewMode" v-model="inHosData.reliable"></el-input>
              </el-form-item>
              <span v-if="previewMode">{{inHosData.reliable}}</span>
</el-col>

 3. data () {
    return {
      rules: {
        reliable: [
          { required: true, message: '请输入可靠程度', trigger: 'blur' }
          // required为小红星标，意思是必填项
          //message为表单未填时出来的提示红字
          //trigger是element ui 里 的方法，输入框时用 blur ，isSlect多选框时用到change
        ],
    methods：{
 4. saveMedical () {
      // $refs['这里的一定是：model中定义的']
      this.$refs['inHosForm'].validate((valid) => {
        if (valid) {}  // valid  表单未填写为false，填写为true
        }
}
    }
复制代码

问题：

element UI 里的dialog弹框，内容过多时，需要滚动条，全局下给.el-dialog__body 设置加上overflow：hidden不起作用，不会出现滚动条，隐藏的内容展示不了

解决：

elemnet ui 里的diglog弹框，内容过多时，全局下给.el-dialog__body 设置overflow：auto；即可

问题：

element ui 里有一些默认样式并不是很好，需要自己定义一些样式，自己定义样式覆盖不了原来的

解决：

在标签内定义样式，写行内样式

<el-col :span=24 style="margin:20px"></el-col>
复制代码

其他问题：

问题：

canvas描线位置不精确，偏离正常位置，base64不能正常转为img图片，this指向当前canvas实例、没有指向vue实例，需要改变this指向，并且保证之前this指向canvas实例

解决：

抽离canvas封装为组件，引入组件调用，不被影响

问题：

发现表单验证功能未100%完成，有缺陷，当前页表单填写完后，不能滑动，发现this指向的是vue实例，需要指向swiper实例，当前并没有挂载相关swiper实例，

需要改变this指向，并且保证之前的this指向vue实例

解决：

阅读swiper API文档。

问题：base64转成图片，this不能指向img问题

解决：

base64转成图片，this指向构造函数，不能指向 vu e实例，转换this，定义变量 let that = this，转换this，完成在线签名功能。

总结：

1. elemnet ui dailog弹框不要写入标签内，要写在根元素中，不要被包裹，如下结构可参考

            </el-col>
          </el-row>
            <el-dialog
            title="签名"
            :visible.sync="centerDialogVisible"
            width="85%"
            center>
            <sign @draw_save="getSignImg"></sign>
          </el-dialog>
        </div>
复制代码

2. 想要点击某个元素出现dialog弹框时，就给某个元素加上element提供的点击事件（），然后dialog中的定义（:visible.sync）也必须一致

3. 在没有引入组件之前，是在父组件中写js代码，因为dialog弹框出现时，弹框里面的dom才会加载，js会立即执行，用了其提供的open方法也不是很理想，js代码总会比dom先执行一步，我也放在定时器中让js缓慢执行，然后清除定时器又成了问题，所以就放弃了这种写法，改为组件引入。

4. 如果某个元素绑定了element提供的点击事件之后，想又得绑定一个点击事件，那么把提供的方法写在自己的方法中

<div class="canva" @click="isShow">

methods：{
    isShow（）{
        this.centerDialogVisible = true
        //...
    }
}
复制代码

5. 向后台传参，使用value接受要传递的数值

6. res.data后台返回的数据，forEach循环遍历，可根据字段自定义数据，操作数据

API.diseaseByTod(params).then((res) => {
this.isSerthe = []
res.data.forEach(item => {
this.isSerthe.push({
chapter: item.fields.icd_code,
chapter_icd: item.fields.icd_code,
illness_name: item.fields.illness,
level: 4
})
})
console.log(res.data)
})
复制代码

一个数组需要存放多个接口的数据时，并且四个地方需要用到这个数组里的数据，可以先循环遍历这个数据，然后根据字段push对象，对象里自定义数据，然后循环下个接口数据push前，清空原来的数组，定义空数组来存放接口数据。

向后台传递的参数，每次都是isSlect.chapter取的值

<li v-for="(isSlect,index) in isSerthe" :key="index" class="lilists" @click="diseaseByCod(isSlect.chapter,isSlect.level)">
    <span class="fontSize">{{isSlect.chapter_icd}}</span><span class="fontSizes">{{isSlect.illness_name}}<span class="el-icon-arrow-right" v-if="isShow"></span>
    <input type="checkbox" v-if="isShaow" name="1" value="isSlect" class="radio"/>
    </span>
</li>
复制代码

一个li循环展示四个接口的数据，实现层级切换，减少代码量。

diseaseCoding () {
      API.diseaseCoding().then((res) => {
        this.isShaow = false
        this.isShow = true
        this.isSerthe = []
        res.data.forEach(item => {
          this.isSerthe.push({
            chapter: item.fields.chapter,
            chapter_icd: item.fields.chapter_range,
            illness_name: item.fields.illnessname,
            level: 1
          })
        })
        console.log(this.isSerthe)
      })
    },
    
    diseaseByCod (value, number) {
      if (number === 1) {
        this.isShaow = false
        this.isShow = true
        this.centerDialogVisible = true

        let params = {
          chapter: value
        }
        API.diseaseByCod(params).then((res) => {
          this.isSerthe = []
          res.data.forEach(item => {
            this.isSerthe.push({
              chapter: item.fields.chapter_range,
              chapter_icd: item.fields.chapter_range,
              illness_name: item.fields.illnessname,
              level: 2
            })
             console.log(item.fields.chapter_range)
          })
          console.log(res.data)
        })
      } else if (number === 2) {
        this.isShaow = false
        this.isShow = true
        let params = {
          chapter_range: value
        }
        API.diseaseByDod(params).then((res) => {
          this.isSerthe = []
          res.data.forEach(item => {
            this.isSerthe.push({
              chapter: item.fields.icd_code,
              chapter_icd: item.fields.icd_code,
              illness_name: item.fields.illness,
              level: 3
            })
          })
          console.log(res.data)
        })
      } else if (number === 3) {
        this.isShaow = true
        this.isShow = false
        let params = {
          icd_code: value
        }
        console.log(value)
        API.diseaseByTod(params).then((res) => {
          this.isSerthe = []
          res.data.forEach(item => {
            this.isSerthe.push({
              chapter: item.fields.icd_code,
              chapter_icd: item.fields.icd_code,
              illness_name: item.fields.illness,
              level: 4
            })
          })
          console.log(res.data)
        })
      }
    }
复制代码

浏览器控制台中network中Preview查看后台完整的数据，Headers请求头中查看向后台是否传过去里参数

排错：分析错误，查看报错信息，往上排查,问题重现，撤回式排除

console.log(_) alert(...) debugger排错方法里alert看有没有执行，代码执行的顺序，同步异步执行过程，加载Dom元素时是不是js已经执行，变量取不到值...

也不必要写一步看一步效果。写一行代码就去看一眼效果，自己心里应该有画面这个下一步效果会是怎么样。这样不至于效率慢，也不会欠下了别人的期望。

好了上面就是在项目中总结遇到的问题。

也相信一步一步踏实稳重，定会有收获，谁都是从什么都不会过来的，只是时间问题。

未完待续。。。

转载于:https://juejin.im/post/5d02fbbbe51d4550723b13e4