Блог

Я создаю динамическую HTML-таблицу с помощью vue js, которая получает данные с сервера. Данные включают «столбцы», которые представляют собой массив с объектами сервера, включая заголовок таблицы (ключ — title), ‘q’ — это тип значения каждого столбца, сгенерированного на основе имени столбца таблицы базы данных, ‘content» — метода отображения значения. например, content=’содержимое»:», ячейка будет отображаться как «.

HTML-часть

    <div id="app3">

        <table  class="table table-bordered">
            <thead>
                <tr>
                    <th scope="col" v-for="c in columns" v-text="c.title"></th>
                </tr>
            </thead>
            <tbody>
                <vue-cell:rows="rows" :columns="columns">
                </vue-row>
            </tbody>
        </table>
</div>
  

Часть Vue js

 <script>
var columns =[
      {'q': "id",
      'title': 'id',
      'content":'<input type="checkbox">'

      },
      {'q': "type",
      'title': 'Type',
       'content":''
      },


]

var rows=[
      {'id': 1,
       'type':"Server",
      },
      {'id': 2,
       'type':"PC",
      },

]
  

создайте компонент для перебора строк и столбцов

 Vue.component('vue-cell', {
         name:'inputBox',
         props: {
             rows: Array,
             columns: Array,
         },

         render: function (createElement) {
             var self = this
             return createElement('tr', self.rows.map(function(row) {
                 return createElement('td', self.columns.map(function(column) {
                      // comlum.q = id or type ...
                      // column['content'] = <input type="checkbox"> 
                      //assign row.id as defalut value
                      if (column['content'].includes('checkbox')) {
                          return createElement('input', {
                              attrs: {
                                 type: "checkbox",
                              },
                              domProps: {
                                  // column.q may not be 'id' maybe type
                                  // get the value of type or id in a row.
                                  value:  row[column.q],
                              }
                          })
                      } else {
                           return row[column.q];}
                 }))
         }))


         },
     })
  

Создайте новый Vue

     new Vue ({
        data: function() {
            return {
                columns: [],
                rows:[],
            }

        },
        created: function() {
             var self = this;
             axios.("/web/asset-json.html").then(function (response) {
               self.columns = [...response.data.columns];
               self.rows  = [...response.data.rows]
})
}

})
</script>