当前位置:   article > 正文

如何二次封装Element-Plus table组件_elementplus表格封装

elementplus表格封装

最近做了一个后台的项目,需要用到大量的表格组件,我就试着把它给封装了一下,记录一下,那么现在开始了。
父页面代码:

<!-- 这里可以使用插槽 -->
<tableData ref="refTable" :config="table_config">
    <template #buts>
        <el-button type="primary" @click="addCost">添加车辆</el-button>
    </template>
    <template #operate="{ row }">
        <el-button link type="primary" size="small" @click="hDetail(row)">查看</el-button>
        <el-button link type="primary" size="small" @click="hDel(row.id)">删除</el-button>
    </template>
</tableData>
             
const table_config = ref({
  thead: [
    {
      label: '车牌号码', prop: "carNumber"
    },
    {
      label: '收费类型', prop: "chargeType",type: 'payment',
      callback: (row, prop) => {
        return charge_type[row[prop]]
      }
    },
    {
      label: '停车总时长', prop: "parkingTime"
    },
    {
      label: '缴纳费用(元)', prop: "actualCharge"
    },
    {
      label: '缴纳状态', prop: "paymentStatus", type: 'payment',
      callback: (row, prop) => {
        return payment_status[row[prop]]
      }
    },
    {
      label: '缴纳方式', prop: "paymentMethod", type: 'payment',
      callback: (row, prop) => {
        return payment_method[row[prop]]||'--'
      }
    },
    {
      label: '缴纳时间', prop: "paymentTime"
    },
  ],
  // 是否显示二级table
  dropDown: false,

  // 是否显示序号
  // num:false,

  // 多选
  select: false,
  url: '/parking/payment/list',
  params: {

  }
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57

组件代码:

<template>
    <div class="editEnterprise">
        <!-- 添加或删除 -->
        <slot name="buts" :row="ids"></slot>
        <el-table :row-key="row => row.id" @selection-change="handleSelectionChange" :data="table_data" :border="false"
            style="width: 100%">
            <!-- 是否显示二级table -->
            <slot v-if="table_config.dropDown" name="expand" :row="{ row }">
                <!-- 插槽 -->
            </slot>
            <!-- 是否显示多选 -->
            <el-table-column reserve-selection v-if="table_config.select" type="selection" width="55" />
            <!-- 是否显示序号 -->
            <el-table-column v-if="true" label="序号" :index="1" type="index" width="70"></el-table-column>
            <!-- 状态项 -->
            <template v-for="item in table_config.thead" :key="item.prop">
                <el-table-column v-if="type.includes(item.type)" :label="item.label" :prop="item.prop">
                    <template #default="{ row }"><span>{{ item.callback && item.callback(row, item.prop)
                    }}</span></template>
                </el-table-column>
                <!-- 正常显示 -->
                <el-table-column v-else :label="item.label" :prop="item.prop" />
            </template>
            <!-- 操作列 -->
            <el-table-column v-if="table_config.isoperate" fixed="right" label="操作">
                <template v-slot="{ row }">
                    <slot name="operate" :row="row" />
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-col :offset="14">
            <el-pagination v-model:current-page="table_config.page" v-model:page-size="table_config.pageSize"
                :page-sizes="[1, 2, 10, 20, 50, 100]" :small="small" :disabled="disabled" :background="background"
                layout="total,  prev, pager, next, sizes, jumper" :total="table_config.total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" /></el-col>
    </div>
</template>
<script setup>
name: 'tableData'
import { watch, ref, onMounted } from 'vue'
import { getTableData } from '@/api/common'
const type = ['card', 'building', 'payment', 'charging', 'duration', 'pole', 'working', 'handle', 'staff']
// 数据-------------------------------------------
const table_data = ref([])
const table_config = ref({
    thead: [],
    dropDown: true,
    num: true,
    select: true,
    isoperate: true,
    url: '',
    total: 0,
    page: 1,
    pageSize: 10,
    params: {}
})
const ids = ref([]);
// 传入配置
const props = defineProps({
    config: {
        type: Object,
        default: () => { }
    },
})
// 方法--------------------------------------------

// 当前页数改变
const handleCurrentChange = (val) => {
    table_config.value.page = val
    loadData()
    // console.log(val);
}
// 每页显示个数改变
const handleSizeChange = (pageSizes) => {
    table_config.value.pageSize = pageSizes
    table_config.value.page = 1
    loadData()
    // console.log(pageSizes);
}
// 表格多选获取选中的数据
const handleSelectionChange = (selection) => {
    ids.value = selection.map(row => row.id).join(',');
    console.log(ids.value);
};
// 初始化数据
const initConfig = () => {
    for (let key in props.config) {
        if (Object.keys(table_config.value).includes(key)) {
            table_config.value[key] = props.config[key]
        }
    }
    console.log('有数据了', table_config.value.params);
    // 配置项配置完成后读取数据
    loadData()
}
const loadData = () => {
    let requestData = {
        url: table_config.value.url,
        data: {
            page: table_config.value.page,
            pageSize: table_config.value.pageSize,
            total: table_config.value.total,
            ...table_config.value.params
        }
    }
    getTableData(requestData).then(({ data }) => {
        console.log(data)
        if (data) { table_data.value = data.rows, table_config.value.total = data.total }
    })
}

defineExpose({ initConfig })
// onMounted(() => { })
// 监听器
watch(props.config, () => {
    initConfig()
}, { immediate: true, deep: true })

</script>

<style lang="scss" scoped>
.editEnterprise {
    margin: 15px 0px;
}

// button样式
.editEnterprise {
    margin: 15px 0;
}

// 分页样式穿透
:deep(.el-pagination) {
    padding: 10px 0;
}
</style>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136

效果:这里分页也在组件处理了,所以也无需自己在弄分页了
image.png
这里取了个巧,因为后台接口要传的必传参几乎一样而且都是GET请求,我就把请求也直接页封装在组件里了,只需要传一个请求地址就可以正常渲染,项目的批量删除也在组件内部处理了,且表单数据也可以直接传入到组件的params属性,这样查询时也可以动态更新数据,封装的不是那么的全面,欢迎各位路过的大佬们给出指点和建议,互相学习进步!

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/701603
推荐阅读
相关标签
  

闽ICP备14008679号