Vue中如何获取表格中的行名和列号？

Posted 2023-02-22

【中文标题】Vue中如何获取表格中的行名和列号？

【英文标题】：How to get the Row name and column number in the table in Vue?

【发布时间】：2018-12-25 20:13:04

【问题描述】：

有什么方法可以使用 vue 获取表格的列号或位置以及行标题吗？

目前为止的输出是这样的。

生成表格的代码：

<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> 上，我必须先检查行标题名称是否与costList 中的item.name 匹配，然后再显示该值。我发现有点接近我想要的输出here，但我不知道如何使用 vue 重现它。任何意见表示赞赏。

【参考方案1】：

我复制了您包含在它的 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" >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/

【讨论】：

我有一个问题here，每次我使用该方法时，我的赋值都会更新。那里进一步解释了我的情况。我希望你能帮助我。

嗨，对不起。我无法理解您的意思，这也是另一个问题。你能创建一个新问题并详细描述它并给我链接吗？

请点击链接或关注此***.com/questions/46380574/…。谢谢