Блог

Я начинающий веб-разработчик. Я делаю свой первый crud в Laravel 8 и Vue. Я использую этот компонент t в своем проекте: https://www.npmjs.com/package/vuejs-datatable

У меня есть этот код:

DataTable.vue:

 <template>
  <div>
    <div class="row mb-3">
      <div class="col-3">
        <div class="input-group">
          <input
            v-model="search"
            class="form-control"
            placeholder="Szukaj..."
            type="text"
          >
          <div class="input-group-append">
            <button class="btn btn-primary" type="button" @click.prevent="handleSearch">
              <font-awesome-icon icon="fas fa-search" />
            </button>
          </div>
        </div>
      </div>

      <div class="col-2">
        <div class="input-group">
          <label for="pageOption" class="mt-2 mr-2">Na stronie</label>
          <select class="form-control" v-model="perPage" @change="handlePerPage" id="pageOption">
            <option v-for="page in pageOptions" :key="page" :value="page">{{ page }}</option>
          </select>
        </div>
      </div>
    </div>


    <table class="table table-hover">
      <thead>
      <tr>
        <th class="table-head">#</th>
        <th v-for="column in columns" :key="column" @click="sortByColumn(column)"
            class="table-head">
          {{ column | columnHead }}
          <span v-if="column === sortedColumn">
                            <font-awesome-icon v-if="order === 'asc' "  icon="fas fa-angle-up" />
                            <font-awesome-icon v-else icon="fas fa-angle-down" />
            </span>
        </th>
      </tr>
      </thead>
      <tbody>
      <tr class="" v-if="tableData.length === 0">
        <td class="lead text-center" :colspan="columns.length   1">Brak danych do wyświetlenia.</td>
      </tr>
      <tr v-for="(data, key1) in tableData" :key="data.id" class="m-datatable__row" v-else>
        <td>{{ serialNumber(key1) }}</td>
        <td v-for="(value, key) in data">{{ value }}</td>
      </tr>
      </tbody>
    </table>


  </div>
</template>

<script type="text/ecmascript-6">
import axios from 'axios';
import Vue from 'vue';
import 'vuejs-datatable/dist/themes/bootstrap-4.esm';
import {
  VuejsDatatableFactory,
  IDataFnParams,
  IDisplayHandlerParam,
  ITableContentParam,
  TColumnsDefinition,
  VueDatatable
} from 'vuejs-datatable';

Vue.use(VuejsDatatableFactory, VueDatatable);


export default {
  props: {
    fetchUrl: {type: String, required: true},
    columns: {type: Array, required: true},
  },
  data() {
    return {
      tableData: [],
      url: '',
      pagination: {
        meta: {to: 1, from: 1}
      },
      offset: 4,
      currentPage: 1,
      perPage: 1,
      sortedColumn: this.columns[0],
      order: 'asc',
      search: null,
      pageOptions: [1, 10, 20, 50],
    }
  },
  watch: {
    fetchUrl: {
      handler: function (fetchUrl) {
        this.url = fetchUrl
      },
      immediate: true
    }
  },
  created() {
    return this.fetchData()
  },
  computed: {
    /**
     * Get the pages number array for displaying in the pagination.
     * */
    pagesNumber() {
      if (!this.pagination.meta.to) {
        return []
      }
      let from = this.pagination.meta.current_page - this.offset
      if (from < 1) {
        from = 1
      }
      let to = from   (this.offset * 2)
      if (to >= this.pagination.meta.last_page) {
        to = this.pagination.meta.last_page
      }
      let pagesArray = []
      for (let page = from; page <= to; page  ) {
        pagesArray.push(page)
      }
      return pagesArray
    },
    /**
     * Get the total data displayed in the current page.
     * */
    totalData() {
      return (this.pagination.meta.to - this.pagination.meta.from)   1
    }
  },
  methods: {
    fetchData() {
      let dataFetchUrl = `${this.url}amp;page=${this.currentPage}amp;column=${this.sortedColumn}amp;order=${this.order}amp;per_page=${this.perPage}`
      axios.get(dataFetchUrl)
        .then(({data}) => {
          this.pagination = data
          this.tableData = data.data
        }).catch(error => this.tableData = [])
    },
    /**
     * Get the serial number.
     * @param key
     * */
    serialNumber(key) {
      return (this.currentPage - 1) * this.perPage   1   key
    },
    /**
     * Change the page.
     * @param pageNumber
     */
    changePage(pageNumber) {
      this.currentPage = pageNumber
      this.fetchData()
    },
    /**
     * Sort the data by column.
     * */
    sortByColumn(column) {
      if (column === this.sortedColumn) {
        this.order = (this.order === 'asc') ? 'desc' : 'asc'
      } else {
        this.sortedColumn = column
        this.order = 'asc'
      }
      this.fetchData()
    },
    handleSearch() {
      this.fetchData()
    },
    handlePerPage($event) {
      this.perPage = $event.target.value;
      this.fetchData()
    }
  },
  filters: {
    columnHead(value) {
      return value.split('_').join(' ').toUpperCase()
    }
  },
  translate: {
    nextButton: 'Dalej',
    previousButton: 'Wstecz',
    placeholderSearch: 'Szukaj...',
  },
  name: 'DataTable'
}
</script>

<style scoped>
</style>
 

Примечания.vue:

 <template>
  <CRow>
    <CCol col="12">
      <transition name="slide">
        <CCard>
          <CCardBody>
            <h4>
              Menus
            </h4>
            <CButton color="success" @click="createNote()" class="mb-3 my-5">Add Menu <font-awesome-icon icon="fas fa-plus" /> </CButton>
            <div class="flex-center position-ref full-height">
              <data-table
                :fetch-url="datatTableUrl"
                :columns="['name', 'email', 'id' , 'created_at']"
                :headers="['nazwa', 'adres email', 'ID' , 'utworzono']"
              ></data-table>
            </div>
          </CCardBody>
        </CCard>
      </transition>
    </CCol>
  </CRow>
</template>

<script>
import Vue from 'vue';

export default {
  data() {
    return {
      datatTableUrl: '',
    }
  },
  created: function () {
    this.datatTableUrl = Vue.prototype.$apiAdress   '/api/users/dataTable'   '?token='   localStorage.getItem("api_token");
  },
  methods: {
    noteLink(id) {
      return `notes/${id.toString()}`
    },
    editLink(id) {
      return `notes/${id.toString()}/edit`
    },
    showNote(id) {
      const noteLink = this.noteLink(id);
      this.$router.push({path: noteLink});
    },
    editNote(id) {
      const editLink = this.editLink(id);
      this.$router.push({path: editLink});
    },
    deleteNote(id) {
      let self = this;
      let noteId = id;
      axios.post(this.$apiAdress   '/api/notes/'   id   '?token='   localStorage.getItem("api_token"), {
        _method: 'DELETE'
      })
        .then(function (response) {
          self.message = 'Successfully deleted note.';
          self.showAlert();
          self.getNotes();
        }).catch(function (error) {
        console.log(error);
        self.$router.push({path: '/login'});
      });
    },
    createNote() {
      this.$router.push({path: 'notes/create'});
    },
  }
}
</script>
 

Этот код работает нормально.

У меня 2 проблемы:

1. Я бы хотел, чтобы заголовки столбцов в таблице были взяты из: headers — в настоящее время это имена столбцов из базы данных (т. Е. Столбцы).
2. Я хотел бы добавить ссылку для редактирования и удаления записи. Я создал методы: editLink (), deleteNote (). Как я могу добавить их в свою таблицу? Я бы хотел, чтобы они были видны рядом со столбцом «имя»

Как я могу это сделать?

Пожалуйста, помогите мне 🙂

Для проблемы № 1. Я бы сделал это так. Объедините столбцы и заголовки в один объект, например: где ключом будет имя столбца (важно: не забудьте зарегистрировать заголовок prop).

 <data-table
     :fetch-url="datatTableUrl"
      :headers="{'name': 'nazwa','email': 'adres email','id': 'ID' , 'created_at': 'utworzono'}"
></data-table>
 

В таблице данных:

 <th v-for="(column, label) in headers" :key="column" @click="sortByColumn(column)" class="table-head">
          {{ label | columnHead }}
          <span v-if="column === sortedColumn">
                            <font-awesome-icon v-if="order === 'asc' "  icon="fas fa-angle-up" />
                            <font-awesome-icon v-else icon="fas fa-angle-down" />
            </span>
        </th>
 

Для второй проблемы № 2 (не очень понятной) лучше переместить эти функции в DataTable и добавить действия в качестве нового столбца, короткий пример:

 <td><button @click="editLink(key1)">Edit link or some fa fa icon</button></td>
 

Добавить в качестве реквизита в DataTable:

 props: {
    fetchUrl: {type: String, required: true},
    columns: {type: Array, required: true},
    headers: {type: Object, required: true} //<-- This
  },