antd-design-vue table 纵向列表展示

weixin_45610757

已于 2023-09-01 21:33:11 修改

阅读量923

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端 anti-design-vue vue

于 2023-09-01 18:52:41 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45610757/article/details/132629371

本文介绍了如何在Vue应用中使用AntDesign的A-Table组件来展示动态生成的列表数据，通过数据绑定和映射实现列表内容的自定义显示。

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

1.在开发中有时候需要总想展示列表数据
在这里插入图片描述
例如这样的，所以需要做一个转化，代码如下

<template>
<div class="about">
<a-table
  :columns="columns"
  :data-source="line">

</a-table>
</div>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          title: "姓名",
          dataIndex: "name",
          key: "name"
        }
      ],
      line: [
        {
          name: "name"
        },{
          name: "age"
        },{
          name: "sex"
        }
      ],
      loadData: [
        {
          name: "李莉",
          age: "11",
          sex: "F"
        },{
          name: "李莉1",
          age: "12",
          sex: "M"
        }
      ]

    }
  },
  mounted() {
  // 数据列表的展示优化，根据数据进行纵向的添加
    this.loadData.map((item,index) => {
      this.columns.push({
        title: "姓名",
        dataIndex: `use${index}`,
        key: `use${index}`
      })
    })
// 展示数据的赋值
	    this.line.map((item)=> {
	      this.loadData.map((citem,cindex) => {
	        item[`use${cindex}`] =  citem[item.name];
	      })
	    })
	  }
	}
	</script>