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>
相关推荐
不要再敲了1 小时前
JavaScript与jQuery:从入门到面试的完整指南
javascript·面试·jquery
xiaoyan20152 小时前
Electron38-Winchat聊天系统|vite7+electron38+vue3电脑端聊天Exe
vue.js·electron·vite
reembarkation2 小时前
使用pdfjs-dist 预览pdf,并添加文本层的实现
前端·javascript·pdf
reembarkation2 小时前
vue-pdf 实现blob数据的预览
javascript·vue.js·pdf
李明卫杭州3 小时前
JavaScript中的dispatchEvent方法详解
javascript
给月亮点灯|3 小时前
Vue3基础知识-setup()、ref()和reactive()
前端·javascript·vue.js
芜青3 小时前
【Vue2手录12】单文件组件SFC
前端·javascript·vue.js
Martin-Luo3 小时前
Vue3 通过json配置生成查询表单
javascript·vue.js·json
梦想CAD控件3 小时前
(在线CAD平台)网页集成CAD SDK的方法
前端·javascript·github
掘金约基奇_3 小时前
JS-SDK开发企微侧边栏
前端·javascript