Vue+elementui爬坑之旅

最新推荐文章于 2024-09-16 22:40:06 发布

smallsnine

最新推荐文章于 2024-09-16 22:40:06 发布

阅读量716

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/smallsnine/article/details/81123772

版权

本文记录了作者在使用Vue.js与ElementUI框架时遇到的问题及解决方案，包括v-show的异常、样式调整、弹窗层级问题、select标签获取label值的难点，以及Vue生命周期的理解与应用。此外，还提到了前端分页的实现和数据处理的注意事项。

摘要由CSDN通过智能技术生成

我有一种蜜汁预感，我会掉入vue的所有坑，所以赶忙今天过来写个记录贴，争取爬遍vue的所有坑
1-vue和elementsui一起用的时候，v-show会不好用。
2-使用elementsui时，样式不好改，如果只是单纯改变大小，建议使用size = “small”
3-当写dialog的时候，dialog可能是一个组件，所以导致弹窗被遮盖层覆盖，虽然可以通过z-index改变这个问题，但是当弹窗里又多一个弹窗的时候，仍然需要再次改变，不好维护。
解决方法：在dialog里添加:append-to-body=“true”，使弹窗从body出发，如下：

<el-dialog title="改变状态" 
    :visible.sync="dialogVisible" 
    @close="$emit('update:show', false )" 
    :show="show"
    :append-to-body="true"
    width="30%">

select问题

我需要获取select的label值而不是value值，使用ref无法实现
解决方法：
select：

<el-select  v-model="dialogForm.state_name"  @change="GetStatusLabel"  clearable placeholder="请选择状态">
              <el-option
              v-for="item in Interview.state_name"
              :key="item.value"
              :label="item.label"
              :value="item.value"> 
              </el-option>
            </el-select>

使用ele的change方法，相当于得到index然后去遍历interview.state_name，匹配上即可得到，

GetStatusLabel(value) {
      let obj = {};
      obj = this.Interview.state_name.find(item => {
        return item.value === value;
      });
      this.returnStatus.label = obj.label;
    }

5-vue的生命周期非常重要，文档里的生命周期的图一定要理解并记忆
还有就是对于ajax获得的数据进行处理时，尽量在获取成功之后的{}里面写，别问我为什么，这个问题我竟然调了半个小时，我一定是傻了。。。。