el-table表格二次封装

最新推荐文章于 2024-07-22 16:50:44 发布

小不着调°

最新推荐文章于 2024-07-22 16:50:44 发布

阅读量1k

点赞数

分类专栏： Vue el-table

本文链接：https://blog.csdn.net/qq_33414883/article/details/106241282

版权

本文介绍如何在Vue.js中进行el-table表格的二次封装，通过创建TableList.vue组件来优化表格展示，并封装Search.vue组件以实现高级搜索功能，提升前端UI交互体验。

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

封装表格TableList.vue

/**
 * Table表格
 */
<template>
  <div class="table_list_fix">
    <!-- 扩展性内容 -->
    <slot name="content_context" />

    <!-- table中间button eg:导出 -->
    <div v-if="exportBut && exportBut.length > 0" class="btn-operates">
      <a
        v-for="(item, index) in exportBut"
        :key="index"
        :href="item.href || null"
        @click="item.method()"
      >
        <el-button class="ht-button-blue">
          <svg-icon :icon-class="item.iconName" class="user-down" />
          {
   {
    item.title }}
        </el-button>
      </a>
    </div>

    <!-- table表格 -->
    <el-table
      ref="multipleTable"
      v-loading="loading"
      v-bind="options"
      :border="border"
      :data="dataSource.slice((pagination.currentPage-1)*pagination.pageSize,pagination.currentPage*pagination.pageSize)"
      style="width: 100%;"
      :header-cell-style="{ background: '#f6f6f6' }"
      :height="height"
      :highlight-current-row="true"
      @row-click="clickItem"
      v-on="tableEvents"
    >
      <!-- 单选框 -->
      <el-table-column
        v-if="options && options.selection && (!options.isShow || options.isShow()) "
        label="选择"
        width="55"
      >
        <template scope="scope">
          <el-radio
            v-model="templateRadio"
            :label="scope.$index"
            @change.native="getTemplateRow(scope.$index,scope.row)"
          >
            <i />  //不显示label
          </el-radio>
        </template>
      </el-table-column>
      <el-table-column
        v-if="options && options.index"
        width="60"
        align="center"
        type="index"
        :label="options && options.labelIndex"
      />

      <!-- 表格数据 -->
      <template v-for="(column, index) in columns">
        <el-table-column
          v-if="!column.isShow || (column.isShow && column.isShow())"
          :key="index"
          v-bind="column.props"
          :prop="column.prop"
          :label="column.label"
          :align="column.align"
          :width="column.width"
          :show-overflow-tooltip="column.tooltip"
        >
          <template slot-scope="scope">
            <template v-if="!column.render">
              <template v-if="column.formatter">
                <span
                  @click="column.click && column.click(scope.row, scope.$index)"
                  v-html="column.formatter(scope.row, column, scope.$index)"
                />
              </template>
              <template v-else-if="column.newjump">
                <router-link
                  class="newjump"
                  v-bind="{ target : '_blank', ...column.target }"
                  :to="column.newjump(scope.row, column, scope.$index)"
                >{
   {
    scope.row[column.prop] || column.content }}</router-link>
              </template>
              <!-- <template v-else-if="column.fechdata">{
   {
    getCodeInfo('XMLX',scope.row[column.prop]) }}</template> -->
              <template v-else>
                <span
                  :style="column.click ? 'color: #409EFF; cursor: pointer;' : null"
                  @click="column.click && column.click(scope.row, scope.$index)"
                >
                  {
   {
    scope.row[column.prop] || column.content }}
                  {
   {
    `${
    scope.row[column.prop] && column.unit ? column.unit : ''}` }}
                </span>
              </template>
            </template>
            <template v-else>
              <render :column="column" :row="scope.row" :render="column.render" :index="index" />
            </template>
          </template>
        </el-table-column>