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>
相关推荐
爱生活的苏苏13 分钟前
vue生成二维码图片+文字说明
前端·vue.js
拉不动的猪15 分钟前
安卓和ios小程序开发中的兼容性问题举例
前端·javascript·面试
贩卖纯净水.32 分钟前
浏览器兼容-polyfill-本地服务-优化
开发语言·前端·javascript
前端百草阁38 分钟前
从npm库 Vue 组件到独立SDK:打包与 CDN 引入的最佳实践
前端·vue.js·npm
且白1 小时前
vsCode使用本地低版本node启动配置文件
前端·vue.js·vscode·编辑器
程序研1 小时前
一、ES6-let声明变量【解刨分析最详细】
前端·javascript·es6
疯狂的沙粒2 小时前
在uni-app中如何从Options API迁移到Composition API?
javascript·vue.js·uni-app
xiaominlaopodaren2 小时前
Three.js 光影魔法:如何单独点亮你的3D模型
javascript
PasserbyX2 小时前
一句话解释JS链式调用
前端·javascript
1024小神2 小时前
tauri项目,如何在rust端读取电脑环境变量
前端·javascript