index.vue

<template>
  <el-row class="el-table-self">
    <el-table
      ref="selftab"
      v-loading="listLoading"
      :max-height="maxHeight || maxTableHeight"
      :height="tableHeight"
      :data="tableData"
      :show-overflow-tooltip="true"
      :highlight-current-row="highLight"
      :header-row-class-name="headerClass"
      style="width: 100%"
    >
      <el-table-column v-if="showIndex" type="index" width="120" label="序号"></el-table-column>
      <template v-for="(column, index) in columns">
        <template v-if="!column.type && !column.operType">
          <el-table-column
            :key="column.value"
            :show-overflow-tooltip="true"
            :fixed="column.fixed"
            :prop="column.value"
            :label="column.label"
            :width="column.width"
            :min-width="column.minWidth"
            align="center"
            :sortable="column.sortable"
            :formatter="column.formatter"
            :class-name="column.className"
            :label-class-name="column.labelClassName"
          >
            <!-- 表头插槽 -->
            <template slot="header" slot-scope="scope">
              <span :style="{ fontSize: fontSize + 'px' }">{{column.label}}</span>
            </template>
            <!-- 表内容插槽 -->
            <template slot-scope="scope">
              <span :style="{ fontSize: fontSize + 'px' }">
                <span>{{scope.row[column.value]|| "--"}}</span>
              </span>
            </template>
          </el-table-column>
        </template>
        <template v-else>
          <el-table-column
            :key="index"
            :show-overflow-tooltip="column.type === 'img' ? false : true"
            :fixed="column.fixed"
            :prop="column.value"
            :label="column.label"
            :sortable="column.sortable"
            :width="column.width"
            :min-width="column.minWidth"
            align="center"
          >
            <!-- 表头插槽 -->
            <template slot="header" slot-scope="scope">
              <span :style="{ fontSize: fontSize + 'px' }">
                {{
                column.label
                }}
              </span>
            </template>
            <!-- 表内容插槽 -->
            <template slot-scope="scope">
              <!-- 按钮 -->
              <template v-if="column.type === 'button' || column.operType === 'button'">
                <!-- 按钮数组 -->
                <template v-for="(op, opIndex) in column.operations">
                  <el-button
                    :key="opIndex"
                    :disabled="
                      op.formatter ? op.formatter(scope.row).disabled : false
                    "
                    :style="[{ fontSize: fontSize + 'px' }, op.style]"
                    :type="
                      op.formatter
                        ? op.formatter(scope.row).type
                        : op.type || ''
                    "
                    :icon="op.icon"
                    @click="op.func(scope.row, scope.$index)"
                  >
                    {{
                    op.formatter
                    ? op.formatter(scope.row).label
                    : op.label
                    ? op.label
                    : scope.row[column.value]
                    }}
                  </el-button>
                </template>
              </template>
              <!-- 图片 -->
              <template v-if="column.type === 'img'">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="
                    scope.row[column.value]
                      ? 'https://ds.cixincloud.com/geca-api' +
                        '/disease-data/file/info/' +
                        scope.row[column.value][0].bucketName +
                        '/' +
                        scope.row[column.value][0].uuidName
                      : ''
                  "
                  :preview-src-list="[
                    scope.row[column.value]
                      ? 'https://ds.cixincloud.com/geca-api' +
                        '/disease-data/file/info/' +
                        scope.row[column.value][0].bucketName +
                        '/' +
                        scope.row[column.value][0].uuidName
                      : '',
                  ]"
                ></el-image>
              </template>
              <!-- 文件 -->
              <template v-if="column.type === 'file'">
                <span>
                  {{
                  scope.row[column.value]
                  ? scope.row[column.value][0].fileName
                  : ""
                  }}
                </span>
              </template>
              <!-- html -->
              <template v-if="column.type === 'html'">
                <div class="highlight" v-html="scope.row[column.value]"></div>
              </template>
              <!-- switch切换  启用 -->
              <template v-if="column.type === 'switch'">
                <el-switch
                  v-model="scope.row[column.value]"
                  :active-value="1"
                  :inactive-value="0"
                  @change="column.func(scope.row, scope.$index)"
                ></el-switch>
              </template>
            </template>
          </el-table-column>
        </template>
      </template>
    </el-table>

    <!-- 分页 -->
    <div v-if="pageSize && totalCounts > 0" class="pagination-footer">
      <!-- <span class="description">{{ description }}</span> -->
      <el-pagination
        background
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCounts"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
  </el-row>
</template>
<script>
import resize from "../TabComponents/resize.js"
import { mapGetters } from "vuex"
export default {
  mixins: [resize],
  props: {
    tableHeight: Number, // 表格的高度
    maxHeight: Number, // 表格的最大高度
    listLoading: Boolean, // table 加载层
    pageSizes: Array, // 决定每页显示的条数[10,15,20,25]
    pageSize: Number,
    totalCount: [Number, String], // 表格数据总数
    currentPage: { type: Number, default: 1 },
    highLight: { type: Boolean, default: true },
    headerClass: { type: String, default: "default" }, // 头部背景色Class名称，默认default
    columns: Array, // 表格列配置数据,{vlaue:对应数据对象中的属性，label：对应的是标题文字，fixed:列是否固定，width:列宽， sortable：是否可排序，formatter:列格式化， className：对应的是列的样式类名}
    tableData: Array, // 表格数据
    showIndex: { default: false }, // 是否展示索引
  },
  data() {
    return {
      httpPrefix:
        process.env.NODE_ENV === "development"
          ? "/api"
          : process.env.VUE_APP_BASE_API,
    }
  },
  computed: {
    ...mapGetters({
      fontSize: "table/fontSize",
    }),
    totalCounts() {
      return this.totalCount - 0
    },
  },
  watch: {},
  mounted() {},
  methods: {
    // 切换页面显示条数
    handleSizeChange(val) {
      this.$emit("pageSizeChange", val)
    },
    // 跳转页码
    handleCurrentChange(val) {
      this.$emit("currentPageChange", val)
    },
  },
}
</script>
<style lang="scss" scoped>
.el-table__empty-block {
  position: relative;
  min-height: 60px;
  text-align: center;
  width: 100%;
  height: 100%;
}

.el-table__empty-text {
  position: absolute;
  left: 50%;
  width: 110px;
  height: 110px;
  top: 50%;
  line-height: 220px;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: #5e7382;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
::v-deep {
  .el-table {
    thead {
      .newHeader {
        height: 60px;
        background: #f6f6f6;
      }
    }
  }
}
</style>