I used the Vue-table2 component for tables. I want to hide a column in my table after checking the value of the isAllowColorPlate.If that value is False, I want to hide the column called Color.Data bind using an API called apiUrl using fields.Please help me to hide the column.

vuetable :

            <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 >
                  <span v-html="props.rowData.FoodCategoryName"></span>
                </div>
              </template>
              <template slot="ItemName" scope="props">
                <div >
                  <span v-html="props.rowData.ItemName"></span>
                </div>
              </template>
              <template
                v-if="this.isAllowColorPlate == 'True'"
                slot="Color"
                scope="props"
              >
                <div >
                  <input type="Color" v-model="props.rowData.Color" disabled />
                </div>
              </template>
              <template slot="Status" scope="props">
                <div >
                  <span
                    v-html="props.rowData.IsInActive ? 'Inactive' : 'Active'"
                  ></span>
                </div>
              </template>
              <template slot="action-edit" scope="props">
                <div >
                  <i
                    
                    style="cursor: pointer"
                    @click="
                      onAction('edit-item', props.rowData, props.rowIndex)
                    "
                  ></i>
                </div>
              </template>
              <template slot="action-delete" scope="props">
                <div >
                  <i
                    
                    style="cursor: pointer"
                    @click="
                      onAction('delete-item', props.rowData, props.rowIndex)
                    "
                  ></i>
                </div>
              </template>
            </vuetable>

Return values :

    return {
      isAllowColorPlate: "True",
      isLoading: false,
      recordCount: 0,
      apiUrl: this.$http.defaults.baseURL   "/api/xxxx/search",
      fields: [
        {
          name: VuetableFieldCheckbox,
          title: "checkbox",
          width: "30px",
          titleClass: "center aligned",
          dataClass: "center aligned",
        },
        {
          name: "FoodCategoryName",
          title: "Catagory Name",
          sortField: "FoodCategoryName",
        },
        {
          name: "ItemName",
          title: "Item Name",
          sortField: "ItemName",
        },
        {
          name: "Color",
          title: "Colour",
          sortField: "Color",
        },
        {
          name: "Status",
          title: "Status",
          sortField: "IsInActive",
          width: "10%",
        },
        {
          name: "action-edit",
          title: "Edit",
          width: "5%",
        },
        {
          name: "action-delete",
          title: "Delete",
          width: "5%",
        },
      ],
      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",
          },
        },
      },
    };
  },

CodePudding user response：

In vuetable2, you can use the visible prop to hide/show the fields. Like this-

let fields = [
  {
    name: 'name',
    sortField: 'name'
    visible: false,
  },
  {
    name: 'email',
    title: 'Email Address',
    visible: 4 == 4
  },
]

On another note, I would like to add a few things -

1. The visible prop accepts boolean values but I can see you are using "True/False" which is a string, so either use the boolean or make sure to provide the boolean by any logic.
2. If your fields are not modifiable, then it's better to make a computed property of fields so you can use data properties inside it for comparison (it would make code clearer) and that would be reactive too.

Now, as per your requirement, you can use the visible prop like this-

data() {
  return {
    isAllowColorPlate: "False",
  };
},

computed: {
  fields() {
    return [
      {
        name: "Color",
        title: "Colour",
        sortField: "Color",
        visible: this.isAllowColorPlate === "True",
      },
      {
        name: "FoodCategoryName",
        title: "Catagory Name",
        sortField: "FoodCategoryName",
      },
    ];
  },
},