如何在不使用 Vue.js (Element-ui) 中的道具的情况下更改 table 每一行中的列的内容？

Question

我从安静的某个时候就陷入了这个问题。我创建了一个包含 3 列的 table，其中两列我可以使用 prop 属性来显示这两列每一行的内容。现在，对于第三列，我想显示另一个数组的内容，如何在第三列中显示这些信息。

请查找以下代码示例：

这是HTML代码

<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 调用，其中 return 我在 data-table 数组中得到了 list/array 的值。它有两个道具，即 Id 和 Color。我对 api 进行了另一个 axios/AJX 调用，其中 return 根据 table 的那一行中显示的 ID 向我提供了用户列表。每行都有一个唯一的 ID。使用该 ID，我对 api 进行了 axios 调用 .. 例如，www.example/{{Id}}.com。这个 return 是我链接到该 ID 的用户列表.现在，我的下一个任务是显示总用户数（通过获取用户数组的长度）并将其显示为按钮。但是，由于我没有使用 prop 来显示值（每行用户数组的长度），因此按钮中的值在所有行中显示相同。如果我单击任何行上的按钮，它会在整个列中不断变化。

get_total_count_users(scope.row) 函数用于对 www.example/{{Id}}.com 进行 axios/AJAX 调用，并存储与用户数组中的那个 ID。

请参考下图：

最初，所有值都是 0，因为第一行中的 ID 有 0 个用户附加到它。

当我单击第 3 行按钮（最初为 0）时，该列中的所有值都更改为 2，因为第 3 行中的 ID 有两个用户与之相关联。

因此，这里的问题是，我只想根据该 ID 显示每一行的用户总数（计数），而不使用道具属性。

希望以上的解释和例子对理解问题有所帮助。任何帮助将不胜感激。

Answer 1

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

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

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

现在在你的 getData() 函数中进行不同的 axios 调用，并将你的响应放入 table，像这样。

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) })
  }
}

如果您有任何问题，请告诉我。

如何在不使用 Vue.js (Element-ui) 中的道具的情况下更改 table 每一行中的列的内容？

How to change contents of a column in each row of a table without using a props in Vue.js (Element-ui)?

html

vue.js

vuejs2

element-ui

vue-props