vue动态table渲染

最新推荐文章于 2024-08-20 04:09:25 发布

weixin_38185589

最新推荐文章于 2024-08-20 04:09:25 发布

阅读量2.4k

点赞数 2

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/weixin_38185589/article/details/108234944

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

由后端返回表头与表数据

<!-- 表格 -->
      <el-table :data="tableData" border style="width: 100%">
        <!-- 动态循环的列表 -->
        <template  v-for="(item, index) in tableLabel">
          <el-table-column :key="index" :prop="item.prop" :label="item.label" width="100"> </el-table-column>
        </template>
        <!-- 固定的列：详细 -->
        <el-table-column label="详细">
          <template slot-scope="scope">
　　　　　　<el-button type="info" @click="">详细</el-button>
　　　　</template>
        </el-table-column>        
      </el-table>

<script>
export default {
  name: "dataList",
  data() {
    return {
      tableData: [
        { id: '1', dep: '112', a: '这是个数据', b: '这是个数据' }, 
        { id: '2', dep: '113', a: '这是个数据', b: '这是个数据'}
      ],
      tableLabel: [
          {label: '序号', prop: 'id'},
          {label: '部门', prop: 'dep'},
          {label: '表头3', prop: 'a'},
          {label: '表头4', prop: 'b'},
      ]
    }
  },
};
</script>