vue.js - 具有独特模型的表头中的多个选择输入

Question

我正在从采用以下格式的后端接收数据

[ 
    [ 
        [ "123", "21/11/2013", "Data", "Data" ], 
        [ "234", "22/11/2013", "Data", "Data" ], 
        [ "345", "12/09/2018", "Data", "Data" ], 
    ], 
    [ 
        [ "123", "Data", "Data", "Data", "Data", "Data", "Data", "Data", "Data", "Data", "Data" ], 
        [ "234", "Data", "Data", "Data", "Data", "Data", "Data", "Data", "Data", "Data", "Data" ], 
        [ "345", "Data", "Data", "Data", "Data", "Data", "Data", "Data", "Data", "Data", "Data" ] 
    ] 
]

每个 fileData 代表一个表，因此在上面的示例中它应该生成两个表。里面的数据包含一个表格行，所以上面的每个表格都有两行。
为了实现这一点，我正在做类似以下的事情。

<table class="table" v-for="(file, index) in fileData" :key="index">
    <tbody>
        <tr v-for="(row, index2) in file":key="index2">
          <td v-for="(data, index3) in row" :key="index3">
            {{ data }}
          </td>
        </tr>
    </tbody>
</table>

这一切似乎工作正常。但是，我使用的数据没有标题，但我需要为包含选择的每一列提供一个标题。因此，我添加了以下内容

<table class="table" v-for="(file, index) in fileData" :key="index">
    <thead>
        <tr>
           <th scope="col" v-for="(col, index2) in file[index]" :key="index2">
             <b-form-select v-model="options.value" :options="options"></b-form-select>
           </th>
        </tr>
    </thead>
</table>

这似乎再次奏效。我的问题是我希望用户使用选择来定义列代表什么。目前，如果我选择某些东西，它们都会改变。

我制作了这个 fiddle 作为例子 https://jsfiddle.net/mhyv62bt/1/

如何使选择独立，是否也可以在选择后删除选项？

谢谢

这似乎为每个表生成正确数量的标题列。

更新
我的设置略有不同，因此尝试将其与我的项目相适应。因此，我创建了文件 THheadSelect.vue

<template id="theadselect">
  <thead>
  <tr>
    <th
      v-for="(i,index) in this.length_"
      :key="index"
    >
      <select
        v-model="headers[index]">
        <option disabled value="">
          Please select one
        </option>

        <option
          v-if="headers[index]"
          selected
        >
          {{headers[index]}}
        </option>
        <option
          v-for="option in filteredOptions"
          :key="option"
        >
          {{option}}
        </option>
      </select>
    </th>
  </tr>
  </thead>
</template>

<script>
export default {
  mounted () {
    this.$emit('update:headers',
      this.headers
        .concat(Array.from({ length: this.length_ }, _ => ''))
        .slice()
    )
  },
  props: {
    options: {
      type: Array,
      required: true
    },
    length: Number,
    headers: {
      type: Array,
      required: true
    }
  },
  computed: {
    length_: {
      get () {
        return this.length || this.options.length
      },
      set (l) {
        this.$emit('update:length', l)
      }
    },
    filteredOptions () {
      return this.options.filter(
        option => !this.headers.includes(option)
      )
    }
  }
}
</script>

然后我尝试在我的页面中使用它

<template>
  <div>
    <b-form
      novalidate
      @submit.stop.prevent=""
    >
      <div class="row">
        <div class="col-12">
          <table class="table table-bordered" v-for="(file, index) in fileData" :key="index">
            <thead
              is="THeadSelect"
              :options="['option1', 'option2', 'option3']"
              :headers.sync="headers"
            ></thead>
            <tbody>
            <tr v-for="(row, index2) in file" :key="index2">
              <td v-for="(data, index3) in row" :key="index3">
                {{ data }}
              </td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </b-form>
  </div>
</template>

<script>
import { THeadSelect } from '@/components/common/THeadSelect'

export default {
  components: {
    THeadSelect
  },
  computed: {
    fileData () {
      return this.$store.getters.fileData
    }
  },
  data () {
    return {
      headers: [],
      length: 10,
    }
  }
}
</script>

不过还是有点乱。每个表只显示 3 个选择。此外，如果我选择表 1 中的一个选项，它会选择表 2 中的相同选项。如果您查看我的原始 fiddle ，您可以看到我尝试使用的初始数据，因此总会有两个表。

Answer 1

<div id='app'>
<table class="table table-bordered" v-for="(file, index) in fileData" :key="index">
    <thead>
  <tr>
    <th scope="col" v-for="(col, index2) in file[index]" :key="index2+index">
      <b-form-select v-model="selectedValue[index+index2]" :options="options">
        <template v-slot:first>
          <b-form-select-option :value="null" disabled>Ignore</b-form-select-option>
        </template>
      </b-form-select>
    </th>
  </tr>
</thead>
<tbody>
  <tr v-for="(row, index2) in file" :key="index2">
    <td v-for="(data, index3) in row" :key="index3">
      {{ data }}
    </td>
  </tr>
</tbody>

data: {
selectedValue: [],
mappedColumns: [],
selected: null,
options: [{
    value: '1',
    text: 'Option 1'
  },
  {
    value: '2',
    text: 'Option 2'
  },
  {
    value: '3',
    text: 'Option 3'
  }
],

您在 v-model 中使用单个值对于所有下拉菜单。所以，一旦你改变了一个下拉菜单。所有这些都会改变。

试试上面的解决方案，我在 data 中声明了一个新数组这是 selectedValue您可以在此数组中保留选择哪个下拉列表的数据