vue2-datatable-component ajax操作答案

【问题标题】：vue2-datatable-component ajax operationsvue2-datatable-component ajax操作
【发布时间】：2018-04-10 14:52:01
【问题描述】：

我对 Vue JS 还很陌生，但使用 JavaScript 已经有一段时间了。我安装了 onewaytech 的 vue2-datatable-component 并且一直在使用他们发布的高级示例。该表工作正常，但我试图让操作列中的按钮执行 ajax 调用以删除该行中显示的对象。我在文档中没有看到任何关于将唯一 ID 传递给 td-Opt 的内容，所以我被卡住了。

【问题讨论】：

标签： vuejs2

【解决方案1】：

您必须使用动态组件来制作它。例如：

data () {
  return {
    props: ['row'],
    supportBackup: true,
    supportNested: true,
    tblClass: 'table-bordered',
    tblStyle: 'color: #666',
    pageSizeOptions: [5, 10, 15, 20],
    columns: [
      {title: '#', field: 'uid', sortable: true},
      {title: 'Date', field: 'date_at', sortable: true},
      {title: 'Nombre', field: 'name', sortable: true},
      {title: 'Precio', field: 'total_price', sortable: true},
      {title: 'Action', field: 'action', tdComp: 'Opt'},
    ],
    data: [],
    total: 0,
    selection: [],
    query: {},
  }`enter code here`
},

哪里选择：

  import actionItem from "../xxx.vue";
  import DisplayRow from "../Utils/nested-DisplayRow.vue";


components: {"Opt": actionItem, , 'DisplayRow': DisplayRow},

所以...在您的 ActionItem 组件中，您可以创建您的组件...该组件将成为您的行操作

【讨论】：