Vue-Bootstrap-Table 操作：重排序、高级搜索、数据链接

vue.js

2024-12-26 00:29:14

操作 Vue-Bootstrap-Table 的常见问题

vue-bootstrap-table 由 wenzhixin 创建，它提供了一种便捷的方式在 Vue 应用中展示数据。本文将探讨如何处理一些常见的操作性问题，例如重新排序固定工具栏、修改高级搜索模态框以及使表格数据可链接。

重新排序固定工具栏

默认情况下，vue-bootstrap-table 工具栏元素的排列顺序由其在模板中的声明顺序决定。要自定义这个顺序，一种有效方法是通过直接修改模板的 HTML 结构来实现。

解决方案：

查找 vue-bootstrap-table 组件的工具栏区域定义。通常，这些元素包含在类似 toolbar 或 buttons 的 slot 或属性中。
重新安排工具栏项的声明顺序，使其与所需的显示顺序匹配。
如果使用了第三方组件或库来实现工具栏，检查它们的配置选项，以寻找更细致的排序控制。

代码示例 (Vue模板)：

<template>
  <b-table :fields="fields" :items="items">
    <template #top-toolbar="{ props }">
      <b-button @click="doAdvancedSearch">高级搜索</b-button>
      <b-button @click="deleteSelected">删除</b-button>  
    </template>
  </b-table>
</template>
<script>
import { BTable, BButton } from 'bootstrap-vue';
export default {
  components: {
    BTable, BButton,
  },
  data() {
     return {
       fields: [/* 省略 */],
        items: [/* 省略 */],
      }
  },
 methods: {
  doAdvancedSearch(){},
  deleteSelected(){}
 }
}

</script>

操作步骤：

直接调整 template #top-toolbar 内 <b-button> 元素的顺序，就可以达到重新排列工具栏按钮的目的。这个示例中，将“删除”按钮移到了“高级搜索”按钮之后。

原理分析：

vue-bootstrap-table 使用 Vue 的 slot 机制。模板 slot 的内容会在 vue-bootstrap-table 组件内部按照其声明的顺序渲染。

修改高级搜索模态框

vue-bootstrap-table 提供了一种基本的高级搜索机制。要更灵活地控制高级搜索模态框的输入元素，需要进一步定制其内部组件。可以将文本输入框替换为日期选择器，或者其他组件，可以利用Vue的组件替换机制。

解决方案：

覆盖或自定义 vue-bootstrap-table 高级搜索模态框的默认内容，需要找到处理高级搜索逻辑相关的模板部分。
引入如 bootstrap-vue 的日期选择器组件或其他类型的输入控件。
在需要的位置替换原来的 <input type="text">，将日期选择器的选择事件和搜索逻辑连接。

代码示例 (Vue模板和脚本)：

<template>
  <b-table :fields="fields" :items="items" :hasAdvancedSearch=true>
    <template #search-modal-content="{props}">
     <div class="search-group">
       <label>开始日期:</label>
       <b-form-datepicker v-model="startDate"></b-form-datepicker>
       <label>结束日期:</label>
        <b-form-datepicker v-model="endDate"></b-form-datepicker>
     </div>
      <b-button @click="handleAdvancedSearch"> 搜索 </b-button>
    </template>
  </b-table>
</template>
<script>
import { BTable, BFormDatepicker ,BButton} from 'bootstrap-vue';
export default {
    components:{ BTable, BFormDatepicker ,BButton},
    data(){
    return{
        fields: [
              { key: 'firstName', label: 'First Name' },
              { key: 'lastName', label: 'Last Name' },
        ],
         items:[
            { firstName:'test', lastName: 'user'}
         ],
        startDate: null,
        endDate: null,
    }
    },
  methods: {
    handleAdvancedSearch() {
    // 进行带日期的搜索逻辑
    console.log("Selected Dates: ", this.startDate,this.endDate)
    }
   }
};
</script>

操作步骤：

使用template #search-modal-content来定义高级搜索模态框的内容，使用 b-form-datepicker 组件替换默认的 input 元素。绑定选择的日期到 startDate 和 endDate 并在搜索方法中处理它们。

原理分析：

组件中的 <template #search-modal-content="{props}"> 用于插入自定义高级搜索模态框内容，可以引入自定义表单控件和表单提交逻辑，实现了表单控件替换。

表格列数据添加链接

要使 vue-bootstrap-table 表格中某一列的数据变为链接，需要使用 Vue 的 scoped slot 自定义列的渲染方式。

解决方案：

在 vue-bootstrap-table 的 <b-table> 中，使用 :formatter属性或 template #[header name]-header 的方式配置特定的字段显示为超链接。
template #[header name]来对特定的单元格添加标签或设置属性。

代码示例 (Vue模板和脚本):

<template>
  <b-table :fields="fields" :items="items">
   <template #cell(firstName)="data">
        <a :href="generateLink(data.item.firstName)">{{data.item.firstName}}</a>
    </template>
  </b-table>
</template>
<script>
import { BTable} from 'bootstrap-vue';
export default {
    components: {BTable},
   data(){
    return{
        fields: [
              { key: 'firstName', label: 'First Name' },
              { key: 'lastName', label: 'Last Name' },
        ],
        items:[
            { firstName:'test', lastName: 'user'}
        ],
    }
  },
 methods: {
    generateLink(firstName){
      return `/profile/${firstName}`
    }
  },
}

</script>