vue中封装el-table表格

最新推荐文章于 2025-05-13 19:42:28 发布

戒不掉的伤怀

最新推荐文章于 2025-05-13 19:42:28 发布

阅读量602

点赞数 1

文章标签： vue.js elementui javascript

本文链接：https://blog.youkuaiyun.com/u013141712/article/details/134303869

版权

文章介绍了如何在Vue项目中创建一个可复用的el-table组件，通过props传递不同的表头和数据内容，展示了如何配置`label`和`prop`属性以适应不同场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一步：创建一个组件tables

<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

<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>