封装 vue + element-ui 表格组件

1.介绍

首先，我们项目中用的表格一般会很多，有的数据也很大，这样每一个模块中都会有一个表格，甚至弹窗中也有，大大增加了代码量，根据这一点，我们来封装一个表格，只需要传入相应的数据，就可以全局使用了，大大减轻了代码量。

封装如下：

2.封装完整代码

<template>
  <section>
    <div class="common-table">
      <el-table :data="tableData" stripe style="width: 100%" @selection-change="commonSelect">
        <el-table-column type="selection" width="55" v-hasPermi="['anno:image:transmission']" v-if="deveops === true">
        </el-table-column>
        <template v-for="column in column">
          <el-table-column :width="column.width ? column.width : 'auto'" :prop="column.prop" :label="column.label">
            <template #default="scope">
              <slot v-if="column.imageId" :name="column.prop" :row="scope.row">
              </slot>
              <template v-else-if="column.prop === 'imagePreview'">
                <div class="overview">
                  <common-errimg :srcImg="scope.row.thumbUrl"/>
                </div>
              </template>
              // 权限管理配置想要显示的操作按钮
              <template v-else-if="column.label === '操作'" v-hasPermi="['anno:image:deletedevops'] && deletedevops">
                <el-button v-for="(item, index) in buttons" :key="index" :type="item.type"
                  @click="$emit('commonDel', scope.row)" @keyup.prevent @keydown.enter.prevent>
                  {{ item.text }}
                </el-button>
              </template>
              <template v-else-if="column.label === '操作'" v-hasPermi="['anno:image:updatemark'] && updatemark">
                <el-button v-for="(item, index) in buttons" :key="index" :type="item.type"
                  @click="$emit('commonDel', scope.row)" @keyup.prevent @keydown.enter.prevent>
                  {{ item.text }}
                </el-button>
              </template>
            </template>
          </el-table-column>
        </template>
      </el-table>
    </div>
  </section>
</template>
<script setup>
import commonErrimg from '@/components/errImg/index'
const emit = defineEmits()
const prop = defineProps({
  tableData: {
    type: Array
  },
  column: {
    type: Array
  },
  buttons: {
    type: Array
  },
  deveops: {
    type: Boolean
  },
  deletedevops: {
    type: String
  },
  updatemark: {
    type: String
  }
})
// 表格多选
const commonSelect = (row) => {
  emit("commonRows", row)
}
onMounted(() => {
})
</script>
<style lang="scss" scoped>
.overview {
  display: inline-block;
}

.overview img {
  max-width: 100px;
  height: auto;
  max-height: 60px;
}
</style>

3.使用

在要用的vue文件中引入组件

<template>
  <div class="image-show app-container">
    <common-table
      :buttons="buttons"
      :column="column"
      :tableData="tableData"
      @commonDel="commonDel"
      ref="refreshTable"
      :deveops="deveops"
      :deletedevops="deletedevops"
    ></common-table>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getImageData"
    />
  </div>
</template>
<script setup>
import commonTable from '@/components/table/index'
const buttons = reactive([
  {
    type: 'text',
    text: '删除',
    methods: 'del'
  }
])
const column = reactive([
  {
    label: '序号',
    prop: 'imageId',
    width: '200'
  },
  {
    label: '图像预览',
    prop: 'imagePreview'
  },
  {
    label: '文件名',
    prop: 'imageName'
  },
  {
    label: '创建时间',
    prop: 'createTime'
  },
  {
    label: '文件大小',
    prop: 'size'
  },
  {
    label: '文件状态',
    prop: 'fileStatus'
  },
  {
    label: '操作',
    width: '80'
  }
])
const total = ref(0)
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10
})
</script>

希望能帮助小伙伴们，有建议可以在评论区留言。