基于el-table封装简单的通用表格组件

Yami__yan

已于 2024-03-28 19:13:54 修改

阅读量236

点赞数

文章标签：前端

于 2023-02-09 17:32:05 首次发布

本文链接：https://blog.csdn.net/Yami__yan/article/details/128956892

版权

<template>

<el-table :data="tableList" height="600" border style="width: 100%" :header-cell-style="{ background: '#eef1f6', color: '#606266' }">

<el-table-column

fixed

label="序号"

type="index"

width="50"

align="center"

/>

<el-table-column

v-for="(item,index) in tableData"

:key="index"

:label="item.label"

align="center"

:prop="item.prop"

/>

</el-table>

</template>

<script>

export default {

name: 'CommomTable',

props: {

tableData: { // table 表头名称设置(前端指定表头名称要渲染的字段)

type: [Array],

default: () => {

return []

}

},

tableList: { // table 表体数据(一般放后端数据)

type: [Array],

default: () => {

return []

}

}

},

data() {

return {

loading: false

}

}

}

</script>

<style lang="less" scoped>

</style>

测试数据例子:

tableData: [{

label: '客户名称',

prop: 'customerName'

}, {

label: '方量',

prop: 'amount'

}]

tableList:[

{

customerName:'名称1',

amount:'2'

},

{

customerName:'名称2',

amount:'3'

},

]