el-table组件的封装

已于 2023-12-28 16:10:30 修改
阅读量1.1k 收藏 10
点赞数
分类专栏： vue2_Element_UI 文章标签： vue.js elementui javascript
于 2023-10-10 10:49:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/achong999/article/details/133741992
版权

前言：仔细看懂本篇博客，玩转element table 不成问题 ，个人理解所谓封装，就是把经常都要公用的东西，拿出来，可以多次复用。公用方法，公用页面都可以封装。

其实封装也并不是有多难，思路也很简单，就是用JS来控制页面。页面动态性越强，组件越灵活，适用范围越广。

就vue+element的组件封装而言，先把所有功能在子页面实现。然后把js里面的动态值，拿到父组件里面去传过来，就完成了，其中技术也就掌握父子组件传值而已。
该组件封装适应于绝大多数table列表，可以自定义列

废话不多说看下例子

先上子组件代码 

<template>
  <div class="table-box">
    <el-table
      ref="tableData"
      v-loading="loading"
      :row-key="rowKey"
      :style="{ width: '100%', fontSize: fontSize + 'px' }"
      :show-header="showHeader"
      :data="tableData"
      :height="tableHeight"
      :summary-method="getSummaries"
      :show-summary="showSummary"
      :cell-style="cellStyle"
      :cell-class-name="tableCellClassName"
      :span-method="arraySpanMethod"
      :border="border"
      size="default"
      :highlight-current-row="highlightCurrentRow"
      v-bind="tableInfo"
      :stripe="isStripe"
      v-on="events"
    >
      <slot name="expand" />
      <!-- 多选 -->
      <el-table-column
        v-if="needSelect"
        :selectable="selectable"
        type="selection"
        width="55"
        :reserve-selection="isReserve"
      />
      <el-table-column v-if="hasIndex" label="序号" width="50" type="index" />
      <template v-for="(item, index) in tableColumn">
        <!-- 此列需要自定义 notTooltip  超出行是否隐藏 -->
        <el-table-column
          v-if="item.isSlot"
          :key="'%' + index"
          :show-overflow-tooltip="!item.notTooltip"
          v-bind="item"
          v-on="events"
        >
          <template slot-scope="{ row, $index }">
            <ex-slot
              v-if="item.render"
              :render="item.render"
              :row="row"
              :index="$index"
              :column="item"
              :class="item.prop"
              :default-value="item.defaultValue"
            />
            <slot v-else :name="item.prop" :row="row" />
          </template>
        </el-table-column>
        <!-- 正常列 -->
        <el-table-column
          v-else
          :key="'%' + index"
          show-overflow-tooltip
          v-bind="item"
          v-on="events"
        />
      </template>
      <el-table-column
        v-if="hasOperation"
        label="操作"
        :min-width="operationWidth"
        :fixed="fixed"
        align="center"
      >
        <!-- <template v-if="!btnButton || btnButton.length === 0" slot-scope="scope">
          <slot name="operation" :row="scope.row" :index="scope.$index" />
        </template> -->
        <template v-if="btnButton.length" slot-scope="{ row, column, $index }">
          <el-button
            v-for="(value, i) in btnButton"
            :key="'$' + i"
            :style="{ fontSize: fontSize + 'px' }"
            size="small"
            :type="value.type"
            :icon="value.icon"
            :class="value.class"
            :disabled="value.disabled && value.disabled(row, column, $index)"
            @click.stop="value.callback(row, column, $index)"
          >
            {{ value.text }}
          </el-button>
        </template>
      </el-table-column>
      <!-- 只针对团队会诊页面 吧v-else关闭 -->
    </el-table>
    <!-- 分页 -->
    <div
      v-if="isNeedPagination"
      style="display: flex; justify-content: flex-end; align-item: centerl; padding-top: 15px"
    >
      <el-pagination
        ref="pagination"
        :page-sizes="pageSizes"
        :page-size.sync="computedPageSize"
        :hide-on-single-page="isSinglePageHide"
        layout="total, sizes, prev, pager, next, jumper"
        :current-page.sync="computedCurrentPage"
        :total="total"
        :small="small"
        :pager-count="pagerCount"
        @current-change="currentChange"
        @size-change="sizeChange"
      />
    </div>
  </div>
</template>
<script>
import store from '@/store'
import { mapState } from 'vuex'
// 自定义组件的内容
const exSlot = {
  functional: true,
  props: {
    row: Object,
    render: Function,
    index: Number,
    column: {
      type: Object,
      default: null
    },
    defaultValue: [Number, String]
  },

  render: (h, ctx) => {
    const params = {
      row: ctx.props.row,
      index: ctx.props.index
    }
    const defaultValue = ctx.props.defaultValue
    params.column = ctx.props.column || {}
    return h(
      'div',
      {
        class: [
          params.column.prop || '',
          params.column.class || params.column.className || ''
        ].join('')
      },
      [ctx.props.render(h, params) || defaultValue]
    )
  }
}
export default {
  name: 'PublicTable',
  components: {
    'ex-slot': exSlot
  },
  props: {
    // key（唯一key值，和reserve-selection搭配使用）
    rowKey: {
      type: [Object, Function],
      default: () => ({})
    },
    // 多选框是否记住上一页数据(必须与row-key唯一值搭配使用)
    isReserve: {
      type: Boolean,
      default: false
    },
    // 单元格的 style 的回调方法
    cellStyle: {
      type: [Object, Function],
      default: () => ({})
    },
    small: {
      type: Boolean,
      default: false
    },
    pagerCount: {
      type: Number,
      default: 7
    },
    // 是否显示表头
    showHeader: {
      type: Boolean,
      default: true
    },
    // 是否显示合计
    showSummary: {
      type: Boolean,
      default: false
    },
    // 是否要高亮当前行
    highlightCurrentRow: {
      type: Boolean,
      default: true
    },
    // 自定义的合计计算方法
    getSummaries: {
      type: Function,
      default: () => {}
    },
    // 获取表格行列索引值
    tableCellClassName: {
      type: Function,
      default: () => {}
    },
    // 合并行或列
    arraySpanMethod: {
      type: Function,
      default: () => {}
    },
    // 是否需要多选
    needSelect: {
      type: Boolean,
      default: false
    },
    // 是否select需要特殊判断
    selectable: {
      type: Function,
      default: () => {
        return true
      }
    },
    // 是否需要序号
    hasIndex: {
      type: Boolean,
      default: false
    },
    // 默认是否选中第一列
    isSetCurrentRow: {
      type: Boolean,
      default: false
    },
    // 是否需要分页
    isNeedPagination: {
      type: Boolean,
      default: false
    },
    // 是否单页隐藏，默认为true
    isSinglePageHide: {
      type: Boolean,
      default: false
    },
    // 当前页页码，支持.sync修饰符
    currentPage: {
      type: Number,
      default: 1
    },
    // 每页数据条数, 支持.sync修饰符默认为每页10条
    pageSize: {
      type: Number,
      default: 20
    },
    // 数据总条数
    total: {
      type: Number,
      default: 0
    },
    // 每页多少数据
    pageSizes: {
      type: Array,
      required: false,
      default: () => [20, 40, 80, 100]
    },
    tableInfo: {
      type: Object,
      default: () => {}
    },
    // 获取数据时是否需要加载loading
    loading: {
      type: Boolean,
      default: false
    },
    tableData: {
      type: Array,
      default: () => []
    },
    // 表格展示数据
    tableColumn: {
      type: Array,
      default: () => []
    },
    // 是否需要操作列
    hasOperation: {
      type: Boolean,
      default: true
    },
    // 是否需要边框
    border: {
      type: Boolean,
      default: false
    },
    // 操作列
    btnButton: {
      type: Array,
      default: () => []
    },
    // 操作列宽度
    operationWidth: {
      type: String,
      default: '60px'
    },
    // 操作
    fixed: {
      type: [Boolean, String],
      default: false
    },
    // 表格方法
    events: {
      type: Object,
      default: () => {}
    },
    // 是否为斑马纹 table
    isStripe: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      fontSize: sessionStorage.getItem('fontSize') || ''
    }
  },
  // data() {
  //   return {
  //     // eslint-disable-next-line vue/no-dupe-keys
  //     tableData: []
  //   }
  // },
  computed: {
    computedCurrentPage: {
      get() {
        return this.currentPage
      },
      set(val) {
        this.$emit('update:currentPage', val)
      }
    },
    computedPageSize: {
      get() {
        return this.pageSize
      },
      set(val) {
        this.$emit('update:pageSize', val)
      }
    },
    tableHeight() {
      console.log('height', !this.isNeedPagination ? '100%' : 'calc(100% - 47px)')
      return !this.isNeedPagination ? '100%' : 'calc(100% - 47px)'
    },
    ...mapState({
      diagnosisSize: state => state.app.diagnosisSize
    })
  },
  watch: {
    '$parent.activeName'() {
      this.$nextTick(() => {
        this.$refs.tableData.doLayout()
      })
    },
    diagnosisSize: {
      handler(newValue) {
        this.fontSize = newValue
      }
    }
  },
  mounted() {
    if (this.isSetCurrentRow) {
      setTimeout(() => {
        this.$refs.tableData.setCurrentRow(this.tableData[0])
      }, 500)
    }
  },
  methods: {
    // 页面切换事件  通过 @currentChange 绑定
    currentChange(val) {
      this.$emit('currentChange', val)
    },
    // 每页条数切换事件，通过@sizeChange 绑定
    sizeChange(val) {
      this.$emit('sizeChange', val)
    },
    getTableRef() {
      return this.$refs.tableData
    }
  }
}
</script>
<style lang="scss" scoped>
.table-box {
  flex: 1;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

::v-deep .el-table {
  border: 1px solid #dfe6ec;
}

::v-deep .el-table th {
  padding: 0;
  height: 40px;
  background: #f2f4fa;
  box-shadow: 0px 1px 0px 0px #ebedf0;
  // color: #191f25;
  color: #000;
  font-weight: 400;
}

::v-deep .el-table td {
  padding: 0;
  height: 40px;
}

::v-deep .el-table {
  width: 100%;

  .el-table__header-wrapper table,
  .el-table__body-wrapper table {
    // width: 100% !important;
  }

  .el-table__body,
  .el-table__footer,
  .el-table__header {
    // table-layout: auto;
  }
  .maxMinBtn {
    padding: 0 5px;
  }
}
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
  background-color: #e6f3e2;
}
::v-deep .el-table__body tr.current-row {
  .flex_div {
    background: rgba(21, 91, 212, 0.3) !important;
  }
  td {
    background: rgba(21, 91, 212, 0.3) !important;
  }
  td {
    background: rgba(21, 91, 212, 0.2) !important;
  }
}
</style>

再上父组件代码

<template>
  <div class="tableBox">
    <PublicTable
      ref="zhenDuanWHTable"
      class="table"
      :loading="loading"
      :current-page="searchParams.pageNum"
      :total="total"
      :page-size="searchParams.pageSize"
      :table-data="tableData"
      :table-info="tableInfo"
      :table-column="columns"
      :btn-button="operations"
      :events="events"
      operation-width="150px"
      @sizeChange="handleSizeChange"
      @currentChange="handleCurrentChange"
    />
  </div>
</template>

<script>
import tableInfo from './mixins/tableInfo.js'
import PublicTable from '@/components/PublicTable/index.vue'
export default {
  components: {
    PublicTable
  },
  mixins: [tableInfo],
  data() {
    return {}
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.tableBox {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 600px;
  .table {
    height: calc(100% - 48px);
  }
}
</style>

再上mixins/tableInfo.js代码

import mockData from './mockData'
export default {
  data() {
    return {
      // 获取列表前是否loading加载
      loading: false,
      // 搜索查询的参数
      searchParams: {
        pageNum: 1,
        pageSize: 10
      },
      // table数据源
      tableData: mockData,
      // 表格项绑定的属性
      columns: [
        {
          prop: 'title',
          label: '审核描述',
          minWidth: '100px',
          align: 'center',
          formatter: row => (row.title ? row.title : '暂无标题')
        },
        {
          prop: 'statusDesc',
          minWidth: '100px',
          align: 'center',
          label: '审核状态'
        },
        {
          prop: 'createBy',
          minWidth: '100px',
          align: 'center',
          label: '申请人'
        },
        {
          sortable: 'custom',
          prop: 'createdTime',
          minWidth: '100px',
          align: 'center',
          label: '申请时间'
        },
        {
          prop: 'auditBy',
          minWidth: '100px',
          align: 'center',
          label: '审核人'
        },
        {
          minWidth: '100px',
          align: 'center',
          prop: 'auditTime',
          label: '审核时间'
        },
        {
          minWidth: '100px',
          align: 'center',
          prop: 'A',
          label: '审核时间'
        },
        {
          minWidth: '100px',
          align: 'center',
          prop: 'B',
          label: '审核时间'
        },
        {
          minWidth: '100px',
          align: 'center',
          prop: 'C',
          label: '审核时间'
        },
        {
          minWidth: '100px',
          align: 'center',
          prop: 'D',
          label: '审核时间'
        },
        {
          minWidth: '100px',
          align: 'center',
          prop: 'E',
          label: '审核时间'
        },
        {
          minWidth: '100px',
          align: 'center',
          prop: 'E',
          label: '审核时间'
        },
        {
          minWidth: '100px',
          align: 'center',
          prop: 'E',
          label: '审核时间'
        },
        {
          minWidth: '100px',
          align: 'center',
          prop: 'E',
          label: '审核时间'
        },
        {
          minWidth: '100px',
          align: 'center',
          prop: 'E',
          label: '审核时间'
        },
        {
          minWidth: '100px',
          align: 'center',
          prop: 'E',
          label: '审核时间'
        },
        {
          minWidth: '100px',
          align: 'center',
          prop: 'E',
          label: '审核时间'
        },
        {
          minWidth: '100px',
          align: 'center',
          prop: 'E',
          label: '审核时间'
        },
        {
          minWidth: '100px',
          align: 'center',
          prop: 'E',
          label: '审核时间'
        },
        {
          minWidth: '100px',
          align: 'center',
          prop: 'E',
          label: '审核时间'
        },
        {
          minWidth: '100px',
          align: 'center',
          prop: 'E',
          label: '审核时间'
        },
        {
          minWidth: '100px',
          align: 'center',
          prop: 'E',
          label: '审核时间'
        }
      ],
      // 表格绑定的属性
      tableInfo: {
        stripe: true,
        'highlight-current-row': true // 选中行高亮
      },
      events: {
        'row-dblclick': row => {
          //双击表格项触发的函数
          console.log(row)
        },
        'row-click': row => {
          // 单机表格项触发的函数
          console.log('row', row)
        }
      },
      // 操作列
      operations: [
        {
          text: '编辑',
          isShow: row => true, // 是否展示
          isDisable: row => true, // 是否禁用
          type: 'text',
          class: 'el-text-color',
          callback: row => {
            this.handleAddOrEdit('edit', row)
          }
        }
      ],
      total: 0
    }
  },
  mounted() {},
  methods: {
    // 每也条数改变
    handleSizeChange(pageSize) {
      this.searchParams.pageSize = pageSize
    },
    // 改变页数
    handleCurrentChange(pageNum) {
      this.searchParams.pageNum = pageNum
    },
    handleAddOrEdit(type, row) {
      if (type === 'edit') {
        this.visible = true
        this.infoData = row
      }
    }
  }
}

假数据mockData（不用管）

export default [
  {
    title: 'A',
    statusDesc: 1,
    createBy: '甲',
    createdTime: '2023-01-01 23:59:59',
    auditBy: '乙',
    auditTime: '2023-01-02 23:59:59'
  },
  {
    title: 'A',
    statusDesc: 1,
    createBy: '甲',
    createdTime: '2023-01-01 23:59:59',
    auditBy: '乙',
    auditTime: '2023-01-02 23:59:59'
  },
  {
    title: 'A',
    statusDesc: 1,
    createBy: '甲',
    createdTime: '2023-01-01 23:59:59',
    auditBy: '乙',
    auditTime: '2023-01-02 23:59:59'
  },
  {
    title: 'A',
    statusDesc: 1,
    createBy: '甲',
    createdTime: '2023-01-01 23:59:59',
    auditBy: '乙',
    auditTime: '2023-01-02 23:59:59'
  },
  {
    title: 'A',
    statusDesc: 1,
    createBy: '甲',
    createdTime: '2023-01-01 23:59:59',
    auditBy: '乙',
    auditTime: '2023-01-02 23:59:59'
  },
  {
    title: 'A',
    statusDesc: 1,
    createBy: '甲',
    createdTime: '2023-01-01 23:59:59',
    auditBy: '乙',
    auditTime: '2023-01-02 23:59:59'
  },
  {
    title: 'A',
    statusDesc: 1,
    createBy: '甲',
    createdTime: '2023-01-01 23:59:59',
    auditBy: '乙',
    auditTime: '2023-01-02 23:59:59'
  },
  {
    title: 'A',
    statusDesc: 1,
    createBy: '甲',
    createdTime: '2023-01-01 23:59:59',
    auditBy: '乙',
    auditTime: '2023-01-02 23:59:59'
  },
  {
    title: 'A',
    statusDesc: 1,
    createBy: '甲',
    createdTime: '2023-01-01 23:59:59',
    auditBy: '乙',
    auditTime: '2023-01-02 23:59:59'
  },
  {
    title: 'A',
    statusDesc: 1,
    createBy: '甲',
    createdTime: '2023-01-01 23:59:59',
    auditBy: '乙',
    auditTime: '2023-01-02 23:59:59'
  },
  {
    title: 'A',
    statusDesc: 1,
    createBy: '甲',
    createdTime: '2023-01-01 23:59:59',
    auditBy: '乙',
    auditTime: '2023-01-02 23:59:59'
  },
  {
    title: 'A',
    statusDesc: 1,
    createBy: '甲',
    createdTime: '2023-01-01 23:59:59',
    auditBy: '乙',
    auditTime: '2023-01-02 23:59:59'
  },
  {
    title: 'A',
    statusDesc: 1,
    createBy: '甲',
    createdTime: '2023-01-01 23:59:59',
    auditBy: '乙',
    auditTime: '2023-01-02 23:59:59'
  },
  {
    title: 'A',
    statusDesc: 1,
    createBy: '甲',
    createdTime: '2023-01-01 23:59:59',
    auditBy: '乙',
    auditTime: '2023-01-02 23:59:59'
  },
  {
    title: 'A',
    statusDesc: 1,
    createBy: '甲',
    createdTime: '2023-01-01 23:59:59',
    auditBy: '乙',
    auditTime: '2023-01-02 23:59:59'
  },
  {
    title: 'A',
    statusDesc: 1,
    createBy: '甲',
    createdTime: '2023-01-01 23:59:59',
    auditBy: '乙',
    auditTime: '2023-01-02 23:59:59'
  },
  {
    title: 'A',
    statusDesc: 1,
    createBy: '甲',
    createdTime: '2023-01-01 23:59:59',
    auditBy: '乙',
    auditTime: '2023-01-02 23:59:59'
  },
  {
    title: 'A',
    statusDesc: 1,
    createBy: '甲',
    createdTime: '2023-01-01 23:59:59',
    auditBy: '乙',
    auditTime: '2023-01-02 23:59:59'
  },
  {
    title: 'A',
    statusDesc: 1,
    createBy: '甲',
    createdTime: '2023-01-01 23:59:59',
    auditBy: '乙',
    auditTime: '2023-01-02 23:59:59'
  },
  {
    title: 'A',
    statusDesc: 1,
    createBy: '甲',
    createdTime: '2023-01-01 23:59:59',
    auditBy: '乙',
    auditTime: '2023-01-02 23:59:59'
  },
  {
    title: 'A',
    statusDesc: 1,
    createBy: '甲',
    createdTime: '2023-01-01 23:59:59',
    auditBy: '乙',
    auditTime: '2023-01-02 23:59:59'
  },
  {
    title: 'A',
    statusDesc: 1,
    createBy: '甲',
    createdTime: '2023-01-01 23:59:59',
    auditBy: '乙',
    auditTime: '2023-01-02 23:59:59'
  },
  {
    title: 'A',
    statusDesc: 1,
    createBy: '甲',
    createdTime: '2023-01-01 23:59:59',
    auditBy: '乙',
    auditTime: '2023-01-02 23:59:59'
  },
  {
    title: 'A',
    statusDesc: 1,
    createBy: '甲',
    createdTime: '2023-01-01 23:59:59',
    auditBy: '乙',
    auditTime: '2023-01-02 23:59:59'
  },
  {
    title: 'A',
    statusDesc: 1,
    createBy: '甲',
    createdTime: '2023-01-01 23:59:59',
    auditBy: '乙',
    auditTime: '2023-01-02 23:59:59'
  },
  {
    title: 'A',
    statusDesc: 1,
    createBy: '甲',
    createdTime: '2023-01-01 23:59:59',
    auditBy: '乙',
    auditTime: '2023-01-02 23:59:59'
  },
  {
    title: 'A',
    statusDesc: 1,
    createBy: '甲',
    createdTime: '2023-01-01 23:59:59',
    auditBy: '乙',
    auditTime: '2023-01-02 23:59:59'
  },
  {
    title: 'A',
    statusDesc: 1,
    createBy: '甲',
    createdTime: '2023-01-01 23:59:59',
    auditBy: '乙',
    auditTime: '2023-01-02 23:59:59'
  },
  {
    title: 'A',
    statusDesc: 1,
    createBy: '甲',
    createdTime: '2023-01-01 23:59:59',
    auditBy: '乙',
    auditTime: '2023-01-02 23:59:59'
  },
  {
    title: 'A',
    statusDesc: 1,
    createBy: '甲',
    createdTime: '2023-01-01 23:59:59',
    auditBy: '乙',
    auditTime: '2023-01-02 23:59:59'
  },
  {
    title: 'A',
    statusDesc: 1,
    createBy: '甲',
    createdTime: '2023-01-01 23:59:59',
    auditBy: '乙',
    auditTime: '2023-01-02 23:59:59'
  },
  {
    title: 'A',
    statusDesc: 1,
    createBy: '甲',
    createdTime: '2023-01-01 23:59:59',
    auditBy: '乙',
    auditTime: '2023-01-02 23:59:59'
  },
  {
    title: 'A',
    statusDesc: 1,
    createBy: '甲',
    createdTime: '2023-01-01 23:59:59',
    auditBy: '乙',
    auditTime: '2023-01-02 23:59:59'
  },
  {
    title: 'A',
    statusDesc: 1,
    createBy: '甲',
    createdTime: '2023-01-01 23:59:59',
    auditBy: '乙',
    auditTime: '2023-01-02 23:59:59'
  },
  {
    title: 'A',
    statusDesc: 1,
    createBy: '甲',
    createdTime: '2023-01-01 23:59:59',
    auditBy: '乙',
    auditTime: '2023-01-02 23:59:59'
  },
  {
    title: 'A',
    statusDesc: 1,
    createBy: '甲',
    createdTime: '2023-01-01 23:59:59',
    auditBy: '乙',
    auditTime: '2023-01-02 23:59:59'
  },
  {
    title: 'A',
    statusDesc: 1,
    createBy: '甲',
    createdTime: '2023-01-01 23:59:59',
    auditBy: '乙',
    auditTime: '2023-01-02 23:59:59'
  },
  {
    title: 'A',
    statusDesc: 1,
    createBy: '甲',
    createdTime: '2023-01-01 23:59:59',
    auditBy: '乙',
    auditTime: '2023-01-02 23:59:59'
  },
  {
    title: 'A',
    statusDesc: 1,
    createBy: '甲',
    createdTime: '2023-01-01 23:59:59',
    auditBy: '乙',
    auditTime: '2023-01-02 23:59:59'
  },
  {
    title: 'A',
    statusDesc: 1,
    createBy: '甲',
    createdTime: '2023-01-01 23:59:59',
    auditBy: '乙',
    auditTime: '2023-01-02 23:59:59'
  },
  {
    title: 'A',
    statusDesc: 1,
    createBy: '甲',
    createdTime: '2023-01-01 23:59:59',
    auditBy: '乙',
    auditTime: '2023-01-02 23:59:59'
  },
  {
    title: 'A',
    statusDesc: 1,
    createBy: '甲',
    createdTime: '2023-01-01 23:59:59',
    auditBy: '乙',
    auditTime: '2023-01-02 23:59:59'
  },
  {
    title: 'A',
    statusDesc: 1,
    createBy: '甲',
    createdTime: '2023-01-01 23:59:59',
    auditBy: '乙',
    auditTime: '2023-01-02 23:59:59'
  },
  {
    title: 'A',
    statusDesc: 1,
    createBy: '甲',
    createdTime: '2023-01-01 23:59:59',
    auditBy: '乙',
    auditTime: '2023-01-02 23:59:59'
  },
  {
    title: 'A',
    statusDesc: 1,
    createBy: '甲',
    createdTime: '2023-01-01 23:59:59',
    auditBy: '乙',
    auditTime: '2023-01-02 23:59:59'
  },
  {
    title: 'A',
    statusDesc: 1,
    createBy: '甲',
    createdTime: '2023-01-01 23:59:59',
    auditBy: '乙',
    auditTime: '2023-01-02 23:59:59'
  },
  {
    title: 'A',
    statusDesc: 1,
    createBy: '甲',
    createdTime: '2023-01-01 23:59:59',
    auditBy: '乙',
    auditTime: '2023-01-02 23:59:59'
  },
  {
    title: 'A',
    statusDesc: 1,
    createBy: '甲',
    createdTime: '2023-01-01 23:59:59',
    auditBy: '乙',
    auditTime: '2023-01-02 23:59:59'
  },
  {
    title: 'A',
    statusDesc: 1,
    createBy: '甲',
    createdTime: '2023-01-01 23:59:59',
    auditBy: '乙',
    auditTime: '2023-01-02 23:59:59'
  },
  {
    title: 'A',
    statusDesc: 1,
    createBy: '甲',
    createdTime: '2023-01-01 23:59:59',
    auditBy: '乙',
    auditTime: '2023-01-02 23:59:59'
  },
  {
    title: 'A',
    statusDesc: 1,
    createBy: '甲',
    createdTime: '2023-01-01 23:59:59',
    auditBy: '乙',
    auditTime: '2023-01-02 23:59:59'
  },
  {
    title: 'A',
    statusDesc: 1,
    createBy: '甲',
    createdTime: '2023-01-01 23:59:59',
    auditBy: '乙',
    auditTime: '2023-01-02 23:59:59'
  }
]

最后附上效果图

不抽烟的小王
关注
  • 0
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CMXtable （el-table二次封装组件）
04-09
elementUI el-table二次封装组件 使用方式： <CMXtable :tableDataList="tableDataList" :tableColumnList="tableColumnList"> <template #weight="{row}"> <span>{{row.weight.toFixed(2)}}</span> </template> </CMXtable> tableColumnList格式： [{ prop: "",//使用item属性名 label: "",//表头label width: "",//列宽 minWidth: "",//最小列宽 sortable:fasle,//是否可排序 showOverflowTooltip:false, isCustomSlot: false,//是否自定义插槽 slotName:'weight',//自定义插槽名，isCustomSlot为true时使用 }]
对element的table组件进行了封装更方便地使用elmentui的eltable组件
08-10
对element的table组件进行了封装，更方便地使用elment ui的el-table组件
Vue3 进阶教程：一文详解 el-table 组件的二次封装技巧！
最新发布
weixin_64051447的博客
06-25 1051
然而，数据的 key 作为列名的情况很少（至少在我们这里，一般是使用中文作为列名的），这就需要我们使用可定制的列名，并且，如果我们不想展示某些字段，上面的写法也是做不到的（它会显示数据的所有字段）。这时候，我们只需要一个映射（mapper）就可以解决这些问题。该对象的每一个属性对应每一列的 prop、key，值对应列的列名 label。// App.vue// 定义新的Header结构，key为column的prop/key，value为column的labela: "列a",b: "列b",
对table组件的二次封装
韩旭不会敲代码吧的博客
04-24 466
对table组件的二次封装
el-table封装（vue2和vue3）
weixin_46899191的博客
06-08 2443
【代码】el-table封装（vue2和vue3）
两种方式对el-table二次封装
weixin_42375707的博客
04-09 3446
两种方式对el-table二次封装
如何基于el-table封装一个方便好用的table组件
Ybbb的博客
11-30 6068
之前听到很多人讲在用 element-ui 的 table 组件时，还是自己循环 el-table-column 去实现的！每个页面都这么写想想就头大，另外万一产品要求你项目中所有的表格都要扩展一个功能，比如说按shift，可以实现数据行多选？那岂不是当场傻眼！ 我们完全可以基于el-table去封装一个组件，基于**配置**自动生成表格。
el-table封装
pleasantsheep_的博客
08-19 2052
el-table封装，el-table-column循环渲染以及自定义列
el-table封装，elementtable封装，eltable封装详解(含分页）
热门推荐
一只程序猿
04-09 1万+
前言：个人理解所谓封装，就是把经常都要公用的东西，拿出来，可以多次复用。公用方法，公用页面都可以封装。 其实封装也并不是有多难，思路也很简单，就是用JS来控制页面。页面动态性越强，组件越灵活，适用范围越广。 就vue+element的组件封装而言，先把所有功能在子页面实现。然后把js里面的动态值，拿到父组件里面去传过来，就完成了，其中技术也就掌握父子组件传值而已。 1、下面就是el-table的一个简单封装： <!-- @author Zou Tiancong @version 创建时间：
el-table，el-form在vue中封装组件化，含操作按钮和插槽.pdf
12-16
在Vue.js开发中，组件化是一种常见的最佳实践，它...此外，Element UI提供了丰富的UI组件和良好的文档支持，使得基于它的组件封装变得相对简单。总的来说，这个封装策略符合Vue.js的设计原则，能够提升项目的整体质量。
vue3企业级项目二次封装el-table、分页
06-28
1、后台管理系统用到的表格、分页很多，所以不能每个页面都写一次，通过组件通讯方式封装 2、项目选型：vite + ts + vue3 3、全篇采用语法糖形式 4、通过带着读者手写简化版 封装技巧，了解 核心原理。全文极简备注...
el-table嵌套 el-form并且加正则校验
06-15
el-table 封装组件
elsa:elsa（eleme simple admin）基于 element-ui 封装 el-form，el-table 等组件，用于快速开发后台管理页面
05-09
:high_voltage: elsa（eleme simple admin）基于 element-ui 封装 el-form，el-table 等组件，适用于快速开发后台管理项目。 用法示例，见： Quickstart npm i elsa-vue -S // vue main.js import Vue from 'vue' ...
二次封装 el-table
叶小桃的博客
09-23 5618
二次封装el-table：表格是最高频的组件之一，其中一般包括搜索条件、表格展示、表格操作列、分页等
el-table 两种方法封装
weixin_45665171的博客
02-26 1220
el-table 两种方法封装
超好用的element的el-table表格组件二次封装-附源码及讲解
wzy_PROTEIN的博客
10-26 4002
前言：在很多后台管理系统开发时总会有很多表格的使用，如果我们每次都用elementui官网的el-table去写的话，调整所有表格的样式就会很麻烦，而且页面内容也会很累赘繁琐。 讲解一个我经常使用的二次封装el-table组件，该组件可以容纳很多种特定的需求并且非常简便。所有例子都是使用vue2+elementUI，如要使用vue3稍作修改即可，也可评论问我
elementui el-table 封装表格
CMDN123456的博客
07-25 1832
el-table 封装表格
el-table简单进行封装
m0_49004429的博客
09-07 208
若有就 使用插槽 并且插槽的数据传递给父组件。)这个属性，如果没用就使用原来的。子组件判断是否表头数据(：是传递的table数据。
vue3 | el-table表格二次封装
ydongabc
04-30 1940
2.列的显示隐藏控制，默认根据接口数据是否有返回绑定prop对应的字段，来实现列的权限控制显隐，也可通过外部传tableHeader来自行控制。1.统一样式，通过slot插槽而非json配置项的形式，来兼容原有table的template写法，方便改造。
el-table 封装
10-08
el-table是Element UI库中的一个组件，用于展示和操作表格数据。如果你想要封装el-table，可以按照以下步骤进行操作： 1. 创建一个新的Vue组件，比如TableWrapper。 2. 在TableWrapper组件中引入el-table，并将其作为模板的一部分。 3. 通过props将数据源、列配置等必要的参数传递给TableWrapper组件。 4. 在TableWrapper组件中使用props接收传递的参数，并将其传递给el-table。 5. 可以使用slot在TableWrapper组件中定义自定义的表头、表尾等内容，并将其插入到el-table中。 6. 可以使用events或者methods在TableWrapper组件中处理el-table的事件和方法。 下面是一个简单的示例代码： ```vue <template> <div> <el-table :data="tableData" :columns="tableColumns"> <!-- 自定义表头 --> <el-table-column label="姓名" prop="name"></el-table-column> <el-table-column label="年龄" prop="age"></el-table-column> </el-table> </div> </template> <script> export default { props: { tableData: { type: Array, default: () => [], }, tableColumns: { type: Array, default: () => [], }, }, } </script> ``` 然后你可以在另一个父组件中使用TableWrapper组件，并传递相应的数据和列配置： ```vue <template> <div> <table-wrapper :table-data="data" :table-columns="columns"></table-wrapper> </div> </template> <script> import TableWrapper from './TableWrapper.vue' export default { components: { TableWrapper, }, data() { return { data: [ { name: '张三', age: 18 }, { name: '李四', age: 20 }, ], columns: [ { label: '姓名', prop: 'name' }, { label: '年龄', prop: 'age' }, ], } }, } </script> ``` 这样，你就将el-table封装到了TableWrapper组件中，并可以通过传递数据和列配置来渲染表格。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值