【vue2】近期bug收集与整理02_export const questiontype = [ { value 1, label ‘

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新大数据全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以添加V获取：vip204888 （备注大数据）

正文

• • • ⭐数据枚举文件的使用
      • ⭐elementUI中分页组件使用的注意事项
      • ⭐v-html标签的作用
      • ⭐elementUI下拉框必须v-model进行双向绑定
      • ⭐组件封装传值的思想

⭐数据枚举文件的使用

同后端那边发送请求的时，请求返回过来的是数字等，有时我们实际页面上渲染的不是数字。这需要怎么处理呢？写一个枚举的映射文件就可以解决。我们发送完成请求并且拿到响应结果后将这个数据放进枚举文件中进行映射。
举个例子：
后端发送的是：xxxx:0，我需要将0对应的值转化成我们需要的。
前端的枚举文件假设为：

// 题型
export const questionType = [
  {
    value: 1,
    label: '单选'
  },
  {
    value: 2,
    label: '多选'
  },
  {
    value: 3,
    label: '简答'
  }
]

• 1.分析枚举文件将每一项拆分成数组的形式

const hireType = questionType.reduce((acc, item) => {
  acc[item.value] = item.label
  return acc
}, {})

• 2.将枚举文件与后端传递过来的值进行映射连接

        // 格式化题型形式的数据
        formHireType (value) {
      return hireType[value] || '未知' // 方式2这样写只会执行一次优化了性能
    },

• 3.我们此刻在页面上进行渲染的时候将数字传递进去，调用这个方法就可以了

        <template #default="{row}">
          {{ formHireType(row.questionType) }}//此处的row.questionType为一个数字
        </template>

此时，我们页面上如果接受的是1、2、3的时候都能找到映射出来的值。如果不属于1、2、3中的任意一个则页面上将会显示“未知”作为值渲染到页面上去。

整体流程为：分析接口、找到映射文件进行格式转换、渲染前调用格式转换方法即可

⭐elementUI中分页组件使用的注意事项

常用的属性：

      @size-change="handleSizeChange"//每页条数变化的时候触发
      @current-change="handleCurrentChange"//当前页变化的时候触发
      :current-page="formData.page"//当前页码
      :page-size="formData.pagesize"//页面现实的数量
      :page-sizes="[2, 4, 6, 8,10]"//分页器
      :total="counts"//总数
      layout=" prev, pager, next,sizes, jumper"//显示的值

日常使用的时候，注意一下几点：

• 1.page-size的值应该与分页其中某一个值数量设置是相同的，否则当我们发page-size给服务器时，就会出现分页器上之后我们传递过去的page-size而不是某条/页。
• 2.每页条数切换完成之后需要重新将page也就是当前页数重置为1。
• 3.执行这两个回调函数中都需要重新调用一下我们页面渲染的列表确保数据能够得到及时的更新。

⭐v-html标签的作用

这个标签具有解析HTML标签的作用。常用于接收后台响应过来的数据进行一个解析。
举个例子当响应数据具有html标签，而我不使用v-html直接将数据渲染呈现如下：

<pre class="ql-syntax" spellcheck="false">cconst <span class="hljs-built\_in">con</span> = '连接' </pre>

当我运用v-html进行解析后，页面渲染如下所示：

完美将富文本格式进行了解析，将解析后的值渲染到了页面当中。

⭐elementUI下拉框必须v-model进行双向绑定

没有双向绑定，控制台会找不到我们下拉框的select这个标签的value是什么

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加V获取：vip204888 （备注大数据）

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

88 （备注大数据）**
[外链图片转存中…(img-xd9DhmC6-1713352819511)]

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！