Vue中如何获取table中的行名和列号?
How to get the Row name and column number in the table in Vue?
有什么方法可以使用 vue 获取 table 的列号或位置和行 header?
到目前为止的输出是这样的。
生成table的代码:
<table v-if="this.itemList.length > 0">
<thead class="ui-table-header-row">
<tr>
<th class="ui-table-header-cell l-padding"></th>
<th class="ui-table-header-cell center" v-for="item in 31" :key="item.id">{{thisMonth}} July{{ item }}Day</th>
</tr>
</thead>
<template>
<tr>
<td></td>
</tr>
<tbody style="border-bottom:#dbb100 1px" v-for="(item,index) in itemList" :key="index.id" >
<tr class="left-align">
<td>{{item.name}}</td>
<td v-for="(item,index) in costList" :key="index.id">{{item.total_work}}</td>
</tr>
</tbody>
</template>
</table>
在这一行 <td v-for="(item,index) in costList" :key="index.id">{{item.total_work}}</td>
上,我必须先检查行 header 名称是否与我在 costList
中的 item.name
相匹配,然后再显示该值。我发现有点接近我想要的输出 here 但我不知道如何使用 vue 重现它。感谢任何输入。
我复制了您包含在它的 vue 副本中的示例。
new Vue({
el: "#app",
data: {
days: [1,2,3,4,5],
itemList: [
{
name: 'Apple'
},
{
name: 'Banana'
},
{
name: 'Carrot'
}
]
},
methods: {
alert(item_index, day_index) {
let item = this.itemList[item_index];
let day = this.days[day_index];
alert(item.name + ', Day ' + day);
}
}
})
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<div id="app">
<table border="1">
<thead>
<tr>
<th>Day/Time</th>
<th v-for="day in days" width="50">Day {{ day }}</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, item_index) in itemList" :key="item.name">
<td>{{ item.name }}</td>
<td v-for="(day, day_index) in days" @click="alert(item_index, day_index)">Click</td>
</tr>
</tbody>
</table>
</div>
看到这个 JS Fiddle:
https://jsfiddle.net/eywraw8t/180692/
有什么方法可以使用 vue 获取 table 的列号或位置和行 header?
到目前为止的输出是这样的。
生成table的代码:
<table v-if="this.itemList.length > 0">
<thead class="ui-table-header-row">
<tr>
<th class="ui-table-header-cell l-padding"></th>
<th class="ui-table-header-cell center" v-for="item in 31" :key="item.id">{{thisMonth}} July{{ item }}Day</th>
</tr>
</thead>
<template>
<tr>
<td></td>
</tr>
<tbody style="border-bottom:#dbb100 1px" v-for="(item,index) in itemList" :key="index.id" >
<tr class="left-align">
<td>{{item.name}}</td>
<td v-for="(item,index) in costList" :key="index.id">{{item.total_work}}</td>
</tr>
</tbody>
</template>
</table>
在这一行 <td v-for="(item,index) in costList" :key="index.id">{{item.total_work}}</td>
上,我必须先检查行 header 名称是否与我在 costList
中的 item.name
相匹配,然后再显示该值。我发现有点接近我想要的输出 here 但我不知道如何使用 vue 重现它。感谢任何输入。
我复制了您包含在它的 vue 副本中的示例。
new Vue({
el: "#app",
data: {
days: [1,2,3,4,5],
itemList: [
{
name: 'Apple'
},
{
name: 'Banana'
},
{
name: 'Carrot'
}
]
},
methods: {
alert(item_index, day_index) {
let item = this.itemList[item_index];
let day = this.days[day_index];
alert(item.name + ', Day ' + day);
}
}
})
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<div id="app">
<table border="1">
<thead>
<tr>
<th>Day/Time</th>
<th v-for="day in days" width="50">Day {{ day }}</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, item_index) in itemList" :key="item.name">
<td>{{ item.name }}</td>
<td v-for="(day, day_index) in days" @click="alert(item_index, day_index)">Click</td>
</tr>
</tbody>
</table>
</div>
看到这个 JS Fiddle: https://jsfiddle.net/eywraw8t/180692/