Vue3+ElementPlus动态生成表头，页面不显示数据

Question

Vue3+ElementPlus动态生成表头时，页面只显示了表头信息，但是没有表格数据
F12查看响应数据，表头和数据所绑定的两个数据变量均有值返回
备注：F12查看页面元素<tbody>标签为空，没有<tr><td>

• 相关代码

  <el-table :data="accountAmountList" border>
    <el-table-column label="序号" type="index" align="center" width="70"></el-table-column>
    <el-table-column label="日期" prop="clearTime" align="center" width="120"></el-table-column>
    <el-table-column v-for="(column, index) in accountList" :key="index" :prop="column.accountEn" :label="column.accountCn" align="right"></el-table-column>
  </el-table>
  

  data() {
    return {
      accountList: [],
      accountAmountList: []
    }
  },
  methods:{
    async queryAccountClearing() {
        try {
            const response = await this.$axios.post('http://localhost:8080/clearing');
            if (response.data.code == 200) {
                this.accountList = response.data.data.accountList;
                this.accountAmountList = response.data.data.accountAmountList;
            } else {
                Message.error('服务器错误');
            }
        } catch (error) {
                console.error('请求出错：', error);
        }
  }
  }
  

{
    "code": 200,
    "message": "操作成功",
    "data": {
        "accountList": [
            {
                "accountId": 1,
                "accountCn": "招行 7358",
                "accountEn": "cmb7358",
                "accountAmount": 15,
                "clearTime": "2025-01-13T23:57:54"
            },
            {
                "accountId": 2,
                "accountCn": "中行 5501",
                "accountEn": "boc5501",
                "accountAmount": 10,
                "clearTime": "2025-01-13T23:57:54"
            },
            {
                "accountId": 3,
                "accountCn": "农行 5277",
                "accountEn": "abc5277",
                "accountAmount": 5,
                "clearTime": "2025-01-13T23:57:54"
            },
            {
                "accountId": 4,
                "accountCn": "交行 2323",
                "accountEn": "bc2323",
                "accountAmount": 1,
                "clearTime": "2025-01-13T23:57:54"
            },
            {
                "accountId": 5,
                "accountCn": "工行 6299",
                "accountEn": "icbc6299",
                "accountAmount": 100,
                "clearTime": "2025-01-13T23:57:54"
            }
        ],
        "accountClearingList": [
            {
                "cmb7358": 15,
                "clearTime": "2025-01-13",
                "bc2323": 1,
                "abc5277": 5,
                "icbc6299": 100,
                "boc5501": 10
            }
        ]
    }
}

Answer 1

因为你的字段对应写错了，看你数据返回是accountClearingList字段，而上面dom写的是accountAmountList字段，只需修改一个对应上就好，下面是我写死的返回数据示例：

<el-table :data="accountAmountList" border>
        <el-table-column
          label="序号"
          type="index"
          align="center"
          width="70"
        ></el-table-column>
        <el-table-column
          label="日期"
          prop="clearTime"
          align="center"
          width="120"
        ></el-table-column>
        <el-table-column
          v-for="(column, index) in accountList"
          :key="index"
          :prop="column.accountEn"
          :label="column.accountCn"
          align="right"
        ></el-table-column>
      </el-table>
const accountList = ref([
  {
    accountId: 1,
    accountCn: '招行 7358',
    accountEn: 'cmb7358',
    accountAmount: 15,
    clearTime: '2025-01-13T23:57:54'
  },
  {
    accountId: 2,
    accountCn: '中行 5501',
    accountEn: 'boc5501',
    accountAmount: 10,
    clearTime: '2025-01-13T23:57:54'
  },
  {
    accountId: 3,
    accountCn: '农行 5277',
    accountEn: 'abc5277',
    accountAmount: 5,
    clearTime: '2025-01-13T23:57:54'
  },
  {
    accountId: 4,
    accountCn: '交行 2323',
    accountEn: 'bc2323',
    accountAmount: 1,
    clearTime: '2025-01-13T23:57:54'
  },
  {
    accountId: 5,
    accountCn: '工行 6299',
    accountEn: 'icbc6299',
    accountAmount: 100,
    clearTime: '2025-01-13T23:57:54'
  }
])
const accountAmountList = ref([
  {
    cmb7358: 15,
    clearTime: '2025-01-13',
    bc2323: 1,
    abc5277: 5,
    icbc6299: 100,
    boc5501: 10
  }
])