Блог

Я когда-то застрял на этой проблеме. Я создал таблицу с 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>
  

Небольшое объяснение приведенного выше кода:
Я вызываю AJAX / Axios для API, который возвращает мне список / массив значений в массиве таблиц данных. В нем было два реквизита, то есть идентификатор и цвет. Я делаю еще один вызов axios / AJX для api, который возвращает мне список пользователей на основе идентификатора, присутствующего в этой строке таблицы. Каждая строка будет иметь уникальный идентификатор. Используя этот идентификатор, я делаю вызов axios для api.. пример, www.example /{{Id}}.com .Это возвращает мне список пользователей, связанных с этим идентификатором. Теперь моя следующая задача — отобразить общее количество пользователей (взяв длину массива users) и отобразить его в виде кнопки. Но, поскольку я не использую prop для отображения значений (длина массива пользователей для каждой строки), значение в кнопке отображается одинаково во всех строках. Он продолжает меняться для всего столбца, если я нажимаю кнопку в любой из строк.

функция get_total_count_users(scope.row) используется для вызова axios / AJAX для www.example /{{Id}}.com и хранит информацию о нескольких пользователях, связанную с этим идентификатором, в массиве users.

Пожалуйста, обратитесь к изображению ниже:

Изначально все значения равны 0, так как к идентификатору в первой строке привязано 0 пользователей.

Когда я нажимаю на кнопку 3-й строки (в которой изначально указано 0), все значения в этом столбце изменяются на 2, поскольку к идентификатору в 3-й строке привязаны два пользователя.

Следовательно, проблема здесь в том, что я просто хочу отобразить общее количество пользователей (количество) в каждой строке на основе этого идентификатора без использования свойства prop.

Надеюсь, приведенное выше объяснение и пример помогут понять проблему. Любая помощь будет оценена.

Ответ решит проблему, но не является конкретным решением, которое определено для получения данных из нескольких массивов в вашу таблицу данных.

Вы можете связать свои ответы axios, а затем использовать foreach для добавления переменных к вашему объекту внутри массива. Итак, я предполагаю, что вы вызываете метод при монтировании следующим образом:

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

дайте мне знать, если у вас возникнут какие-либо проблемы.