vue 简单的动态table表格封装

效果图

 

 

//代码
<template>
  <!-- 表格 -->
  <div :id="id" class="tableList">
    <el-table
      v-if="renderOff"
      ref="tableList"
      :header-cell-style="{background:'#F5F7FA',color:'#666'}"
      :class="['table-main', className]"
      :data="renderData"
      :stripe="stripe"
      :height="tableHeight"
      tooltip-effect="dark"
      highlight-current-row
      size="mini"
    >
      <el-table-column
        v-for="(i, index) of renderHead"
        :key="index"
        size="mini"
        :prop="i.prop"
        :label="i.label"
        :width="i.width"
        :min-width="i.minWidth"
        :fixed="i.fixed"
        :align="i.align"
        :show-overflow-tooltip="i.tooltip || true"
      >
        <!-- 表头 支持自定义插槽 默认显示label -->
        <template slot="header" slot-scope="scope">
          <slot :name="`table-head-${i.slotKey}`" :scope="scope">
            <span class="table-default-th">{{ scope.column.label }}</span>
          </slot>
        </template>
        <!-- 表格 支持自定义插槽 默认显示prop内容 -->
        <template slot-scope="scope">
          <slot :name="`table-${i.slotKey}-${scope.$index}`" :scope="scope">
            <span :style="i.style" :class="['table-default-td', i.className]">{{
              formatValue(scope, i)
            }}</span>
          </slot>
        </template>
      </el-table-column>
      <el-table-column
        v-if="isActive"
        fixed="right"
        :width="activeWidth"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button
            v-for="(item, index) in active"
            :key="index"
            v-permission="item.pcode"
            size="mini"
            type="text"
            @click="handlerTdClick(item.eventKey, scope)"
            >{{ item.txt }}</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-row v-if="isPage" type="flex" justify="end" align="middle" class="h60">
      <el-pagination
        :total="total"
        :current-page="page.pageNumber"
        :page-size="page.pageSize"
        background
        layout="total, prev, pager, next, jumper"
        @current-change="handleCurrentChange"
      />
    </el-row>
  </div>
</template>

<script>
import tableHeight from "@/mixins/tableHeight";
export default {
  name: "BaseTable",
  mixins: [tableHeight],
  props: {
    // table ID
    id: {
      type: [String, Number],
      default: "",
    },
    /** 表头项
     * {
     *  label:[String] 显示的标题 ''
     *  prop:[String] 对应列内容的字段名 ''
     *  width:[String] 对应列的固定宽度 ''
     *  min-width:[String] 对应列的最小宽度(自适应) ''
     *  fixed:[String,Boolean] 列是否固定在左侧或者右侧  'true/left/right'
     *  align:[String] 对齐方式 'left/center/right'
     *  tooltip:[Boolean] 当内容过长被隐藏时显示tooltip true
     *  className:[String] 类名 ''
     *  eventkey:[String] 自定义事件名称 ''
     *  slotKey:[String] 自定义插槽键值 ''
     *  style:[Object]
     *  format:[Function] 过滤函数
     *  default:[String] 默认值
     * }
     */
    heads: {
      type: Array,
      default: () => [],
    },
    // 数据源
    datas: {
      type: Array,
      default: () => [],
    },
    // 操作按钮
    active: {
      type: Array,
      default: () => [],
    },
    // 是否显示操作列
    isActive: {
      type: Boolean,
      default: true,
    },
    activeWidth: {
      type: Number,
      default: 100,
    },
    // 是否为斑马纹
    stripe: {
      type: Boolean,
      default: true,
    },
    // tableの类名
    className: {
      type: [String],
      default: "",
    },
    // 分页
    page: {
      type: Object,
      default: () => ({}),
    },
    // 是否显示分页
    isPage: {
      type: Boolean,
      default: true,
    },
    // 总条数
    total: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      // 渲染开关
      renderOff: true,
      // 渲染数据
      renderData: [],
      // 渲染表头
      renderHead: [],
      // 表格配置
      table: {},
    };
  },
  watch: {
    heads: {
      handler(value) {
        this.renderHead = value;
      },
      immediate: true,
      deep: true,
    },
    datas: {
      handler(value, oldList) {
        this.renderData = value;
      },
      immediate: true,
      deep: true,
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.getHeight();
    });
  },
  methods: {
    /* 点击分页 */
    handleCurrentChange(val) {
      this.$emit("currentPage", val);
    },
    /* 处理单元格内容 */
    formatValue(scope, column) {
      let text = scope.row[scope.column.property];
      // 处理默认值
      if (!text && text !== 0) {
        if (typeof column.default === "string") {
          return column.default;
        } else return "-";
      }
      // 处理空数组
      if (Array.isArray(text)) {
        if (!text.length) return "-";
      }
      // 处理过滤函数
      if (typeof column.format === "function") {
        text = column.format(scope.row[scope.column.property]);
      }
      return text;
    },
    /* TD点击事件 */
    handlerTdClick(eventKey, scope) {
      this.$emit(eventKey || "TD-click", scope.row);
    },
   
  },
};
</script>

 <base-table
          :id="baseTable"
          :datas="tableList"
          :heads="tableHeader"
          :active="tableActive"
          :page="page"
          :total="total"
          :stripe="false"
          :active-width="activeWidth"
          @editorData="editorData"
          @delectData="delectData"
          @currentPage="currentPage"
          @resourceData="resourceData"
        />

//pcode 自定义指令传权限code
data() {
    return {
      baseTable: 'baseTable',
      tableHeader: [
        { label: '编号', prop: 'number' },
        { label: '项目类型', prop: 'name' },
        { label: '类型组', prop: 'projTypeGroupName' },
        { label: '项目属性', prop: 'projectPropertyName' },
        { label: '学科', prop: 'subjectName' },
        { label: '任务类型', prop: 'projTaskTypeNames' } // todotodo
      ],
      tableList: [],
      tableActive: [
        { txt: '编辑', eventKey: 'editorData', pcode: [''] },
        { txt: '删除', eventKey: 'delectData', pcode: [''] },
        {
          txt: '定义资源组',
          eventKey: 'resourceData',
          pcode: ['basic_data_update']
        }
      ],
      isActive: false,
      activeWidth: 200,
      page: {
        pageNumber: 1,
        pageSize: 20
      },
      total: 0
    };
  },


methods: {
    editorData(){}
    delectData(){}
    currentPage(){}
    resourceData(){}
}