vue中封装el-table表格

第一步:创建一个组件tables

html 复制代码
<template>
    <div>
        <el-table
        :data="tableData"
        style="width: 100%">
            <el-table-column
                v-for="(item,index) in carr" :key="index"
                :label="item.title"
                :prop="item.prname">
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
export default{
    props:['tableData','carr'],
}
</script>

第二部,在页面中使用,传不同的表头,和不同的数据内容,主要字段名要对应 label和prop

html 复制代码
<template>
   <TableSv  :tableData="tableData" :carr="carr"/>
</template>
  <script>
import TableSv from '@/components/TableSv.vue';
    export default {
        data() {
            return {
                carr:[
                    {
                    title:'姓名',
                    prname:'name'
                },
                {
                    title:'日期',
                    prname:'date'
                }
            ],
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎'

                    }, {
                    date: '2016-05-04',
                    name: '王小2'
                
                }]
            }
        },
    components: { TableSv }
}
  </script>
相关推荐
daols882 小时前
vue vxe-table 自适应列宽,根据内容自适应宽度的2种使用方式
vue.js·vxe-table
OEC小胖胖4 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水5 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
老虎06275 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台5 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
烛阴6 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
CN-Dust6 小时前
[FMZ][JS]第一个回测程序--让时间轴跑起来
javascript
盛夏绽放6 小时前
Vue3 中 Excel 导出的性能优化与实战指南
vue.js·excel
全宝7 小时前
🎨前端实现文字渐变的三种方式
前端·javascript·css
yanlele8 小时前
前端面试第 75 期 - 2025.07.06 更新前端面试问题总结(12道题)
前端·javascript·面试