VUE 实现 Table的动态绑定

最新推荐文章于 2024-08-16 08:01:20 发布

柳牧之

最新推荐文章于 2024-08-16 08:01:20 发布

阅读量1.5w

点赞数 2

分类专栏： vue 文章标签： vue vue table 绑定 table动态绑定

本文链接：https://blog.csdn.net/u012976879/article/details/83791883

版权

vue 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

 模板代码

<template>
  <div id="app-4">
    <el-table
      :data="tableData"        //tableData是实际存储tabl的json数据
      style="width: 100%">
      <el-table-column v-for="items in tableDataType"  //tableDataType存储的是表头的列数据
                       :prop="items.nameProp"   //使用动态绑定时候prop前面必须要有“：”号
                       :label="items.nameLable"  //使用动态绑定时候label前面必须要有“：”号
                       width="180">
      </el-table-column>
    </el-table>
  </div>
</template>

vue代码

 <script>
  export default {
    data () {
      return {
        tableDataType: [{
          nameLable: '姓名',
          nameProp: 'name'
        }, {
          nameLable: '日期',
          nameProp: 'date'

        }, {
          nameLable: '地址',
          nameProp: 'address'
        }],
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',

        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    }
  }
</script>

实现效果

在这里插入图片描述

注意

使用vuejs来实现对table的绑定操作，代码实现本身很简单。但是在实现的过程中需要注意如下细节问题：（1）绑定时候 el-table-column 的属性中需要用**:prop** 而不是**prop**
      （2）绑定时候 el-table-column 的属性中需要用** :label** 而不是**label**
      （3）带冒号的属性**:prop**表示是vue的来渲染的属性，不带冒号的属性**prop**表示的是常规html的属性。