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>
相关推荐
codingandsleeping1 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
白水清风2 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
用户22152044278002 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端2 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧2 小时前
Promise 的使用
前端·javascript
用户51681661458414 小时前
Vue Router 路由懒加载引发的生产页面白屏问题
vue.js·vue-router
前端康师傅4 小时前
JavaScript 作用域
前端·javascript
前端缘梦4 小时前
Vue Keep-Alive 组件详解:优化性能与保留组件状态的终极指南
前端·vue.js·面试
云枫晖4 小时前
JS核心知识-事件循环
前端·javascript
Simon_He4 小时前
这次来点狠的:用 Vue 3 把 AI 的“碎片 Markdown”渲染得又快又稳(Monaco 实时更新 + Mermaid 渐进绘图)
前端·vue.js·markdown