Laravel 8+Vue项目中vuejs-datatable自定义表头与添加操作列方法

1. 自定义表头文本 #

vuejs-datatable默认读取字段名作为表头，你可以直接用传入的headers参数生成列配置覆盖默认值：

• 若headers为父组件传入的props，通过计算属性生成符合组件要求的列配置即可：

props: ['headers'],
computed: {
  columns() {
    return this.headers.map(item => ({
      // 自定义表头文本读取headers参数的对应值
      label: item.label,
      // 绑定对应数据库字段
      field: item.field,
      // 按需配置排序、过滤能力
      sortable: item.sortable ?? true
    }))
  }
}

• 模板中给vuejs-datatable绑定生成的columns属性：

<vuejs-datatable
  :columns="columns"
  :data="tableData"
>
</vuejs-datatable>

2. 新增操作列绑定编辑、删除方法 #

通过vuejs-datatable的单元格插槽自定义操作列内容，同时调整列配置把操作列放到name列旁：

• 首先修改columns计算属性，插入操作列配置：

computed: {
  columns() {
    const baseColumns = this.headers.map(item => ({
      label: item.label,
      field: item.field,
      sortable: item.sortable ?? true
    }))
    // 找到name列的下标，将操作列插入到name列后方
    const nameColIndex = baseColumns.findIndex(col => col.field === 'name')
    baseColumns.splice(nameColIndex + 1, 0, {
      label: '操作',
      field: 'id',
      // 操作列不需要排序
      sortable: false
    })
    return baseColumns
  }
}

• 模板中添加操作列插槽，绑定你已定义的editLink、deleteNote方法：

<vuejs-datatable
  :columns="columns"
  :data="tableData"
>
  <!-- 操作列插槽，row参数可拿到当前行的全部字段数据 -->
  <template #cell(id)="{ row }">
    <button @click="editLink(row.id)" style="margin-right: 8px">编辑</button>
    <button @click="deleteNote(row.id)">删除</button>
  </template>
</vuejs-datatable>

如果需要删除二次确认，直接在deleteNote方法中添加判断逻辑即可，row参数支持传入当前行任意字段到你的自定义方法中。

内容的提问来源于stack exchange，提问作者tarafikttes