Vue DataTables自定义显示列：实现复选框控制列显示

安装与导入 #

先安装依赖包并导入组件：

npm install --save datatables.net-vue3

import DataTable from "datatables.net-vue3";

组件内配置与复选框实现 #

在Vue组件的data中定义列配置和选中列数组，用循环渲染复选框避免重复代码：

export default {
  data() {
    return {
      // 统一管理所有列的字段名与显示标题
      columns: [
        { field: 'id', title: 'Id' },
        { field: 'title', title: 'Title' },
        { field: 'start', title: 'Start' },
        { field: 'date of arrival', title: 'Date of arrival' },
        { field: 'status', title: 'Status' }
      ],
      // 绑定复选框的选中列字段数组
      selectedColumns: []
    };
  },
  // 初始化默认选中所有列
  mounted() {
    this.selectedColumns = this.columns.map(col => col.field);
  }
}

<!-- 列选择复选框组 -->
<div v-for="col in columns" :key="col.field" class="column-checkbox">
  <input 
    type="checkbox" 
    name="column" 
    :id="`field-${col.field}`" 
    :value="col.field" 
    v-model="selectedColumns"
  />
  <label :for="`field-${col.field}`">{{ col.title }}</label>
</div>

动态渲染DataTables表格 #

根据选中的列，动态控制表头和单元格的显示：

<DataTable :data="data" class="display table-responsive">
  <thead>
    <tr>
      <th 
        v-for="col in columns" 
        :key="col.field"
        v-if="selectedColumns.includes(col.field)"
      >
        {{ col.title }}
      </th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="row in data" :key="row.id">
      <td 
        v-for="col in columns" 
        :key="col.field"
        v-if="selectedColumns.includes(col.field)"
      >
        {{ row[col.field] }}
      </td>
    </tr>
  </tbody>
</DataTable>

核心逻辑说明 #

• 用columns数组统一管理列信息，避免重复编写HTML，方便后续新增/修改列
• selectedColumns与复选框双向绑定，实时同步用户的选择
• 通过v-if判断当前列是否在选中数组中，控制列的显示与隐藏

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