如何解决如何在不使用Vue.jsElement-ui中的道具的情况下更改表每一行中列的内容?
我有时会安静地停留在这个问题上。我创建了一个包含3列的表格,其中的两列可以使用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调用,该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) })
}
}
让我知道您是否有任何问题。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。