【发布时间】：2020-06-11 14:33:01
【问题描述】：
我正在从后端接收采用以下格式的数据
[
[
[ "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/
如何使选择独立，是否也可以在选择后删除选项？
谢谢
这似乎为每个表生成了正确数量的标题列。
更新 我的设置略有不同，因此尝试将其与我的项目相适应。因此，我创建了文件 THeadSelect.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 中选择相同的选项。如果您查看我的原始小提琴，您可以看到我正在尝试使用的初始数据，因此总会有两个表。
【问题讨论】：
标签： vue.js