vue2 中如何使用 render 改善组件

最新推荐文章于 2025-03-17 08:35:51 发布

JackChouMine

最新推荐文章于 2025-03-17 08:35:51 发布

阅读量1k

点赞数 17

分类专栏： vue2 文章标签： javascript 前端开发语言 vue

本文链接：https://blog.youkuaiyun.com/JackZhouMine/article/details/139523197

版权

vue2 中如何使用 render 改善组件

前面在 vue2中如何使用render函数有提到，vue 官网给出的 render 函数的例子只能体现 render 函数的优雅的一方面，却不能看出其扩展性，今天就来封装一个体现其扩展性的组件。

需求

后台管理中常常有如下布局的数据展示需求：

Ant Design Vue Descriptions描述列表'

像表格又不是表格，像表单又不是表单，实际上样子像表格，呈现的数据是一个对象，和 form 的绑定的值一样，我将其称为表单式表格。

样式深的列是标题，浅的列是标题对应的取值，数据往往是服务器返回的，标题往往是定宽的，取值可能各种各样，比如显示一张图片，值为 01，需要显示是与否，有时候需要添加一个修改按钮，让用户能修改某些值，还需要设置某一列跨越几列。

先来看看一个基于 element ui 的实现

不好的实现

在接手的项目看到一个实现，先看使用方式

<FormTable :data="lessonPackageArr" :fleldsInfo="lessonPackageInfo" :maxColumn="3" label-width="120px">
  <template #presentedHours="{ data }">
    <div class="flex-box between">
      <span>{
  { data.presentedHours }}</span>
      <span class="column-btn" @click="editPresentedHours(data)">修改</span>
    </div>
  </template>
  <template #gifts="{ data }">
    <div class="flex-box between">
      <span>{
  { data.gifts }}</span>
      <span class="column-btn" @click="editPresentedHours(data)">修改</span>
    </div>
  </template>
</FormTable>

lessonPackageInfo 对象如下结构：

// 一个对象，用于配置标题列和标题列对应的字段
// type 指定值的类型，现在组件内部设置可能显示哪些类型的值了
// 对于服务其返回 1 0 需要显示 是否的数，提供一个 map_data 来映射
// column 属性设置跨列
// 需要自定义显示内容 提供 slot
lessonPackageInfo: {
   
    orderType: {
    type: 'option', desc: '课时包类别', map_data: {
    1: '首单', 2: '续费', 5: '赠课' } },
    combo: {
    type: 'text', desc: '套餐名称' },
    presentedHours: {
    type: 'text', desc: '赠送课时', slot: true },
    price: {
    type: 'text', desc: '标准价格' },
    gifts: {
    type: 'text', desc: '赠送礼物', column: 3, slot: true },
  }