二次封装elementui表格

·  阅读 1016
对于开发后台管理系统的时候,需要用到大量的表格,我们可以写一个表格公共组件进行复用,提高开发效率和便于以
后维护。
复制代码

子组件:总的来说封装判断表格里单元格的数据形式,分为了3个部分,第一部分是添加多选框,第二部分是包含其他形式,不能把它们直接当作纯数据渲染,需要用到插槽,然后在父组件里填充插槽,第三部分就是单纯的数据,可以直接在父组件里header数组传进来

    <el-table class="table-box" ref="multipleTable" :data="table.tableData"
      style="width: 100%"
    >
      <template v-for="(item, index) in table.header" :key="index">
        <!-- 如果表格需要实现多选,在表头数据中添加{ prop: "selection" }即可 -->
        <el-table-column
          type="selection"
          :width="item.width"
          v-if="item.prop == 'selection'"
        ></el-table-column>
        <!-- 如果单元格数据不是单纯的数据格式,需要添加其它形式,例如图标,或者其它形式,
        在表头header数组里的元素设置isStatus: true,其它代码在父组件里写,填充此处的插槽 -->
        <template v-else-if="item.isStatus">
          <el-table-column
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            :fixed="item.fixed"
            :min-width="item.minWidth"
          >
            <template #default="scope">
              <slot
                name="status"
                :row="scope.row"
                :label="item.label"
                :index="scope.$index"
              ></slot>
            </template>
          </el-table-column>
        </template>
        <!-- 单元格数据只是单纯的数据,表头header数组里的元素只需传入prop、label、width,如果需要给某
        一列的数据添加颜色,可以直接传color -->
        <el-table-column
          v-else
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :fixed="item.fixed"
        >
          <template #default="scope">
            <el-popover
              placement="top"
              width="260"
              trigger="hover"
              :disabled="item.tooltip ? false : true"
            >
              <span>{{ scope.row[item.prop] }}</span>
              <template #reference>
                <span
                  class="multi-line-hidden cursor"
                  :style="{
                    '-webkit-line-clamp': item.multiLine ? item.multiLine : '',
                    color: item.color ? item.color : '',
                  }"
                  >{{ scope.row[item.prop] }}</span
                >
              </template>
            </el-popover>
          </template>
        </el-table-column>
      </template>
    </el-table>
复制代码

这里还用到了elementui的el-popover进行单元格的文字超出隐藏之后完整数据的展示,但需要在子组件写文字超出隐藏的样式

.multi-line-hidden {
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
复制代码

在子组件props接收父组件传入的值

props: {
    /**
     * 接受父组件传入的值
     * table: {
     *    tableData: [], 表格数据
     *    header: [] 表头数据
     * }
     *
     * 表头header数组里对象属性:
     * prop:对应列内容的字段名
     * label:显示的标题
     * width:对应列的宽度
     * fixed:列是否固定在左侧或者右侧
     * isStatus:单元格数据不是单纯的数据,需要另外添加形式,设置了true,要在父组件里写相关代码填充插槽
     * tooltip:单元格数据是否需要弹出框Popover
     * color:控制单元格数据的颜色(除颜色是主题色时,需用插槽单独写,使用主题色变量)
     * multiLine:控制单元格数据需要几行显示,多余的用省略号代替
     * minWidth: 控制操作列的最小宽度
     *
     */
    table: {
      type: Object,
      required: true,
    }
  }
复制代码

父组件:

需要传的值
table: {
  // 接口请求返回的数据
  tableData: [],
  header: [
    { prop: "id", label: "品牌ID", width: 50 },
    { prop: "logoUrl", label: "品牌LOGO", width: 70, isStatus: true },
    { prop: "name", label: "品牌名称", width: 100 },
    { prop: "alias",label: "品牌别名",width: 60,multiLine: 1,tooltip: true},
    { prop: "desc",label: "品牌描述",width: 140,multiLine: 1,tooltip: true,},
    { prop: "brandGroupName", label: "品牌分组", width: 60 },
    { prop: "", label: "商品数量", width: 116, isStatus: true },
    { prop: "createTime", label: "添加时间", width: 140 },
    { prop: "status", label: "状态", width: 60, isStatus: true },
    { prop: "", label: "操作", isStatus: true },
  ]
}
复制代码

公共组件的使用

  <common-table :table="table">
    <!-- 插槽的使用 -->
    <template #status="scope">
      <template v-if="scope.label === '品牌LOGO'">
      </template>
      <template v-if="scope.label === '商品数量'">
      </template>
      <template v-if="scope.label === '状态'">
      </template>
      <template v-if="scope.label === '操作'">
        <button class="btn-blue marRight8" @click="edit(scope.row)">
          编辑
        </button>
        <button
          :class="scope.row.status ? 'btn-red' : 'btn-green'"
          class="marRight8"
          @click="switchEnable(scope.row)"
        >
          {{ !scope.row.status ? "启用" : "禁用" }}
      </template>
    </template>
  </common-table>
复制代码
分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改