0

我正在尝试使用服务器端处理创建一个数据表，该数据表在最后一列中有一些操作按钮。我将 Vue 3 用于 UI，并设法使用该columnDefs属性使用单独的组件呈现操作按钮。

数据表

这就是我渲染动作按钮的方式。

columnDefs: [
  ...
  {
    targets: -1,
    "createdCell": function(cell, cellData, rowData, row, col) {
      let viewButton = createApp(DatatableActionButton, {
        btnId: `viewUserAction${rowData.id}`,
        btnClass: 'btn-primary text-white',
        iconClass: 'cil-apps',
        eventName: 'user-view-redirect',
        item: rowData,
      }, 
     );

      let editButton = createApp(DatatableActionButton, {
        btnId: `editUserAction${rowData.id}`,
        btnClass: 'btn-warning',
        iconClass: 'cil-pencil',
        eventName: 'user-edit-redirect',
        item: rowData,
      },
     );

      let deleteButton = createApp(DatatableActionButton, {
        btnId: `deleteUserAction${rowData.id}`,
        btnClass: 'btn-danger text-white',
        iconClass: 'cil-delete',
        eventName: 'user-delete-action',
        item: rowData,
      },
     );

      const viewSpan = document.createElement('span');
      const editSpan = document.createElement('span');
      const deleteSpan = document.createElement('span');

      viewButton.mount(viewSpan);
      editButton.mount(editSpan);
      deleteButton.mount(deleteSpan);

      $(cell).empty().append(viewSpan, editSpan, deleteSpan);
    },
  },
],

这是DatatableActionButton组件。

<template>
  <button :id="btnId" type="button" class="btn btn-sm mr-1" :class="[btnClass]" 
          @click="btnClick(item)"
          data-toggle="tooltip"
          data-placement="top" :title="btnTitle">
    <i :class="[iconClass]"></i>
    <span v-if="btnText">{{ btnText }}</span>
  </button>
</template>

<script>
export default {
  name: "DatatableActionButton",
  props: {
    btnId: { type: String },
    btnClass: { type: String },
    iconClass: { type: String },
    btnTitle: { type: String, default: 'Click' },
    btnText: { type: String, default: null },
    eventName: { type: String },
    item: { type: Object },
  },
  mounted() {

  },
  methods: {
    btnClick() {
      if (this.eventName) {
        console.log('Event', this.eventName, 'fired!');
        // this.eventBus.emit(this.eventName, this.item);
      }
    }
  }
};
</script>

我尝试按照文档使用mitt包处理eventName道具，但它不起作用。

btnClick单击时不会触发该功能。我什至没有在控制台中收到任何错误。

发射器在其他地方工作，EventBus但不在DatatableActionButton组件内。我怀疑这样做的原因是columnDefs使用单独createApp()的安装DatatableActionButton到表格单元格。

是否有另一种解决方法？我只想为每个表记录调用View,Edit和操作。Delete

4

0 回答 0