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>
相关推荐
毕业设计制作和分享9 分钟前
springboot150基于springboot的贸易行业crm系统
java·vue.js·spring boot·后端·毕业设计·mybatis
键盘不能没有CV键3 小时前
【图片处理】✈️HTML转图片字体异常处理
前端·javascript·html
你的人类朋友5 小时前
【Node】认识multer库
前端·javascript·后端
可触的未来,发芽的智生6 小时前
新奇特:黑猫警长的纳米世界,忆阻器与神经网络的智慧
javascript·人工智能·python·神经网络·架构
前端开发爱好者7 小时前
尤雨溪官宣:"新玩具" 比 Prettier 快 45 倍!
前端·javascript·vue.js
欧阳呀7 小时前
Vue+element ui导入组件封装——超级优雅版
前端·javascript·vue.js·elementui
天***88968 小时前
js封装一个双精度算法实现
开发语言·前端·javascript
胡斌附体8 小时前
使用Electron创建helloworld程序
前端·javascript·electron·nodejs·pc
toobeloong8 小时前
Electron 从低版本升级到高版本 - webview通信的改造
前端·javascript·electron