封装 vue + element-ui 表格组件

川长思鸟来 2023-09-24 16:16 62阅读 0赞

### 1.介绍 ###

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

封装如下：  
![在这里插入图片描述][4bb201ad16b54d4790bc2244f167f5dc.png]

### 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>

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

[4bb201ad16b54d4790bc2244f167f5dc.png]: https://img-blog.csdnimg.cn/4bb201ad16b54d4790bc2244f167f5dc.png