如何在不使用Vue.jsElement-ui中的道具的情况下更改表每一行中列的内容？

问题描述

我有时会安静地停留在这个问题上。我创建了一个包含3列的表格，其中的两列可以使用prop属性显示这两列的每一行的内容。现在，对于第三列，我想显示另一个数组中的内容，如何在第三列中显示此信息。

请在下面找到代码示例：

<el-table :data = "data_table">

<el-table-column
prop = "Id"
label= "Unique ID">
</el-table-column>

<el-table-column
prop = "color"
label = "Color">
</el-table-column>

<el-table-column
prop = ""
label = "Count">

  <template slot-scope="scope">

      <el-button type="text" @click="dialogVisible = true; get_total_count_users(scope.row)">{{users.length}}</el-button>
      <!--Skipping the code for dialog Box..I have tested that part pretty well,so I kNow it works. -->

  </template>

</el-table-column>

</el-table>

这是代码的javascript部分：

<script>

export default {

  data(){
    return{
    data_table:[],// I fill the data_table array using some AJAX/Axios calls which has props Id and Color. 
    users: [],// I fill the users array using some AJAX/Axios calls which has multiple user information. 

};
},methods:{
   get_total_count_users(row){
// axios call,etc. This part works successfully,I checked the values. 
}
}
</script>

以上代码的一些解释：我对API进行了AJAX / Axios调用，该API返回了数据表数组中的值的列表/数组。它有两个道具，分别是Id和Color。我对api进行了另一个axios / AJX调用，该API根据表的该行上存在的ID向我返回用户列表。每行都有一个唯一的ID。使用该ID，我对API进行了axios调用，例如www.example / {{Id}}。com。这将向我返回链接到该ID的用户列表。现在，我的下一个任务是显示总用户（通过获取用户数组的长度）并将其显示为按钮。但是，由于我没有使用prop来显示值（每行的用户数组的长度），因此按钮中的值在所有行中都显示为相同。如果我单击任意行上的按钮，则整个列的值都会不断变化。

get_total_count_users（scope.row）函数用于对www.example / {{Id}}。com进行axios / AJAX调用，并将与该ID关联的多个用户信息存储在users数组中。

请参考下图：

最初，所有值均为0，因为第一行的ID附加了0个用户。

当我单击“第三行”按钮（其最初具有0）时，该列中的所有值都将更改为2，因为第三行中的Id绑定了两个用户。

因此，这里的问题是，我只是想基于该ID显示每行的用户总数（计数），而无需使用prop属性。

希望以上说明和示例有助于您理解问题。任何帮助将不胜感激。

解决方法

答案将解决问题，但不是将多个数组中的数据获取到数据表中的特定解决方案。

您可以链接axios响应，然后使用foreach将变量添加到数组内的对象。因此，我假设您正在像这样在mount上调用方法：

data: () => ({ tableData: [] }),mounted() {
  this.getData();
}

现在在您的getData（）函数中进行不同的axios调用，并将您的响应放入表中，像这样。

methods: {
  getData() {
    var myTableData = [];
    axios({ method: 'GET',url: 'http://first-url',headers: [...] }).then(res => {
      //we have got the table data here
      myTableData = res.data;
      //looping through data and making axios calls based on data.
      myTableData.foreach((row,index) => {
        var newUrl = 'https://getdatafrom.com/'+ row.id+'/'; //using the data from previous call.
        axios({ method: 'GET',url: newUrl,headers: [...]}).then(res2 => {
        var counts = res.data; 
         // adding variable myCount to the table data array.
         row.myCount = counts[index];
       }).catch(err => { console.error(err)})
     })
        // setting data object 
        this.tableData = myTableData;
    }).catch(err => { console.error(err) })
  }
}

让我知道您是否有任何问题。

html vue-props vue.js