как выбрать или отменить выбор столбца из GUI - PullRequest
Новая
       17

как выбрать или отменить выбор столбца из GUI

0 голосов
/ 04 мая 2020 
 <v-select
      v-model="selectedHeaders"
      :items="$con.col"
      label="Select Columns"
      :menu-props="{ maxHeight: '200' }"
      multiple
      outlined
      return-object
    >
      <template v-slot:selection="{ item, index }">
        <v-chip v-if="index < 2">
          <span>{{ item.text }}</span>
        </v-chip>
        <span
          v-if="index === 2"
          class="grey--text caption"
        >(+{{ selectedHeaders.length - 2 }} others)</span>
      </template>
    </v-select>
  </v-flex>
  <v-data-table

    :headers="showHeaders"
    :items="desserts"
  >
computed:{
 showHeaders() {
  return this.$con.col.map(c =>
    this.headersMap[c] || { text: this.$options.filters.capitalize(c), value: 'attributes.' + c }

  )
 }
},

con.col содержит имя столбца, и это python файл ... если я удаляю список столбцов из файла con * из python, тогда некоторые имена столбцов по умолчанию будут отображаться в таблице ... i Я не получил никакой подсказки, откуда имя столбца по умолчанию выбирается и отображается в таблице ... У меня есть headersMap, но и headersMap содержат объект массива .... Я раньше пробовал еще одну возможность, но я не получил никакой соответствующей вывод .. ниже приведен код, который я также пробовал раньше 

<v-select
      v-model="selectedHeaders"
      :items="headers"
      label="Select Columns"
      :menu-props="{ maxHeight: '200' }"
      multiple
      outlined
      return-object
    >
<v-data-table
    :headers="showHeaders"
    :items="desserts"
  >
headers: [],
  headersMap: {
    name: { text: 'Dessert (100g serving)', value: 'name' },
    calories: { text: 'Calories', value: 'calories' },
    fat: { text: 'Fat (g)', value: 'fat' },
    carbs: { text: 'Carbs (g)', value: 'carbs' },
    protein: { text: 'Protein (g)', value: 'protein', sortable: false },
    iron: {text: 'Iron (%)', value: 'iron'}
  },
created () {
this.headers = Object.values(this.headersMap);
this.selectedHeaders = this.headers;
},
computed: {
//Done to get the ordered headers
showHeaders () {
  return this.headers.filter(s => this.selectedHeaders.includes(s));
}
 }

другая возможность 

<v-select
      v-model="selectedHeaders"
      :items="headers"
      label="Select Columns"
      :menu-props="{ maxHeight: '200' }"
      multiple
      outlined
      return-object
    >
<v-data-table
    v-model="selected"
    :headers="showHeaders"
    :items="desserts"
>

showHeaders() {
  return this.headers.map(c =>
    this.selectedHeaders[c] || { text: this.$options.filters.capitalize(c), value: 'attributes.' + c }
 )
 },
created () {
this.headers =  this.$con.col.map(c =>this.$options.filters.capitalize(c))
this.selectedHeaders = this.headers
}

я пробовал еще много возможностей, но не получил никакого результата , ** con.col содержит имя столбца id, я удаляю список столбцов из файла con, после чего таблица получает значение по умолчанию для имени столбца **

...