Vue-table2如何根据isAllowColorPlate条件隐藏绑定字段列

需求说明 #

使用Vue-table2组件构建表格，通过apiUrl接口结合fields实现数据绑定。需要根据isAllowColorPlate的值判断，当该值为"False"时，隐藏名为Color的列。

解决方案 #

核心思路是通过计算属性动态生成fields数组，根据isAllowColorPlate的值决定是否包含Color列；同时配合模板的条件渲染，确保仅在允许显示时渲染该列的内容。

步骤1：将fields改为计算属性 #

把原本在data中定义的静态fields数组，替换为响应式的计算属性，根据isAllowColorPlate动态调整列的显示：

computed: {
  fields() {
    // 定义基础列集合（不包含Color列）
    const baseFields = [
      {
        name: VuetableFieldCheckbox,
        title: "checkbox",
        width: "30px",
        titleClass: "center aligned",
        dataClass: "center aligned",
      },
      {
        name: "FoodCategoryName",
        title: "分类名称",
        sortField: "FoodCategoryName",
      },
      {
        name: "ItemName",
        title: "项目名称",
        sortField: "ItemName",
      },
      {
        name: "Status",
        title: "状态",
        sortField: "IsInActive",
        width: "10%",
      },
      {
        name: "action-edit",
        title: "编辑",
        width: "5%",
      },
      {
        name: "action-delete",
        title: "删除",
        width: "5%",
      },
    ];

    // 如果允许显示颜色列，将其插入到指定位置（示例为第4列，索引3）
    if (this.isAllowColorPlate === "True") {
      baseFields.splice(3, 0, {
        name: "Color",
        title: "颜色",
        sortField: "Color",
      });
    }

    return baseFields;
  }
}

步骤2：调整模板中的Color列插槽 #

保留模板中Color插槽的条件渲染，确保仅在允许显示时渲染该列的内容（即使fields中已移除该列，此条件也能避免不必要的DOM渲染）：

<template
  v-if="isAllowColorPlate === 'True'"
  slot="Color"
  scope="props"
>
  <div class="col-sm-12">
    <input type="Color" v-model="props.rowData.Color" disabled />
  </div>
</template>

完整修改后的代码示例 #

组件模板部分

<vuetable
  :css="css.table"
  ref="vuetable"
  :api-url="apiUrl"
  http-method="post"
  :fields="fields"
  data-path="data"
  pagination-path="summary"
  @vuetable:pagination-data="onPaginationData"
  :append-params="moreParams"
  @vuetable:loading="onLoading"
  @vuetable:load-error="onLoadError"
  @vuetable:loaded="onLoaded"
  :sort-order="sortOrder"
  :per-page="perPage"
  track-by="ItemId"
>
  <template slot="FoodCategoryName" scope="props">
    <div class="col-sm-12">
      <span v-html="props.rowData.FoodCategoryName"></span>
    </div>
  </template>
  <template slot="ItemName" scope="props">
    <div class="col-sm-12">
      <span v-html="props.rowData.ItemName"></span>
    </div>
  </template>
  <template
    v-if="isAllowColorPlate === 'True'"
    slot="Color"
    scope="props"
  >
    <div class="col-sm-12">
      <input type="Color" v-model="props.rowData.Color" disabled />
    </div>
  </template>
  <template slot="Status" scope="props">
    <div class="text-center">
      <span
        v-html="props.rowData.IsInActive ? 'Inactive' : 'Active'"
      ></span>
    </div>
  </template>
  <template slot="action-edit" scope="props">
    <div class="text-center">
      <i
        class="fa fa-edit"
        style="cursor: pointer"
        @click="
          onAction('edit-item', props.rowData, props.rowIndex)
        "
      ></i>
    </div>
  </template>
  <template slot="action-delete" scope="props">
    <div class="text-center">
      <i
        class="fa fa-trash-o"
        style="cursor: pointer"
        @click="
          onAction('delete-item', props.rowData, props.rowIndex)
        "
      ></i>
    </div>
  </template>
</vuetable>

组件脚本部分

export default {
  data() {
    return {
      isAllowColorPlate: "True",
      isLoading: false,
      recordCount: 0,
      apiUrl: this.$http.defaults.baseURL + "/api/xxxx/search",
      sortOrder: [
        {
          field: "ItemName",
          direction: "asc",
        },
      ],
      filterText: "",
      perPage: 10,
      moreParams: {},
      css: {
        table: {
          tableClass: "table table-bordered",
          loadingClass: "loading",
          ascendingIcon: "glyphicon glyphicon-chevron-up",
          descendingIcon: "glyphicon glyphicon-chevron-down",
          handleIcon: "glyphicon glyphicon-menu-hamburger",
        },
        pagination: {
          wrapperClass: "pagination float-right",
          activeClass: "active",
          disabledClass: "disabled",
          pageClass: "page-item",
          linkClass: "page-link",
          paginationClass: "pagination",
          paginationInfoClass: "float-left",
          dropdownClass: "form-control",
          icons: {
            first: "fa fa-chevron-left",
            prev: "fa fa-chevron-left",
            next: "fa fa-chevron-right",
            last: "fa fa-chevron-right",
          },
        },
      },
    };
  },
  computed: {
    fields() {
      const baseFields = [
        {
          name: VuetableFieldCheckbox,
          title: "checkbox",
          width: "30px",
          titleClass: "center aligned",
          dataClass: "center aligned",
        },
        {
          name: "FoodCategoryName",
          title: "分类名称",
          sortField: "FoodCategoryName",
        },
        {
          name: "ItemName",
          title: "项目名称",
          sortField: "ItemName",
        },
        {
          name: "Status",
          title: "状态",
          sortField: "IsInActive",
          width: "10%",
        },
        {
          name: "action-edit",
          title: "编辑",
          width: "5%",
        },
        {
          name: "action-delete",
          title: "删除",
          width: "5%",
        },
      ];

      if (this.isAllowColorPlate === "True") {
        baseFields.splice(3, 0, {
          name: "Color",
          title: "颜色",
          sortField: "Color",
        });
      }

      return baseFields;
    }
  },
  methods: {
    onPaginationData() { /* 你的逻辑 */ },
    onLoading() { /* 你的逻辑 */ },
    onLoadError() { /* 你的逻辑 */ },
    onLoaded() { /* 你的逻辑 */ },
    onAction() { /* 你的逻辑 */ }
  }
}

说明 #

• 当isAllowColorPlate变为"False"时，计算属性fields会自动移除Color列的配置，Vuetable将不再渲染该列。
• 模板中的v-if条件确保颜色选择器仅在允许显示时渲染，避免无效DOM生成。
• 该方案支持isAllowColorPlate值的动态切换，表格会自动更新列的显示状态。

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