vue中给循环元素统一添加事件和样式很简单,下面看下单独给某个循环出来的元素添加事件和样式如何实现。

demo.vue:

<template>
    <table>
       <tr >
          <th v-for = "head in muta">{{head}}</th>   //循环生成表头
       </tr>
       <tr v-for = "(item,index) in version" :key = "index" >     //循环生成每行的数据
          <td v-for = "(child,index2) in item" :key = "index2" @click = "run(index2)" :class = "index2 == 'num'||index2 =='gu' ? 'underl' : ''">{{child}}</td>                                 //循环生成每个单元格的数据
       </tr>
    </table>
</template>

<script>
  export default {
    name: "demo",
    data() {
      return {
        muta:[
          '方案版本',
          'BOM清单',
          '原理图',
          '版本需求',
          '固件',
          '添加时间',
        ],
        version:[
           {
              num: '1.10.0',
              bom: 'ooo.xlsx',
              reason: 'oooo.doc',
              need:'2222.doc',
              gu:'1.2.01',
              time:'2018-06-14 12:12:12',
          },
          {
            num: '1.22.0',
            bom: 'ooo.xlsx',
            reason: 'oooo.doc',
            need:'2222.doc',
            gu:'1.2.01',
            time:'2018-06-14 12:12:12',
          },
        ],
       }
      },
    methods:{
      run(index2){
        this[index2]()
      },
      num(){
        console.log('num')
      },
      gu(){
        console.log('gu')
      },
    },
  }
</script>

从代码可以看出,要想给循环生成出的单元格单独添加样式和事件,就要用到每个单元格特有的身份证明即key(index2),先给整行单元格定义事件,然后把key值传进去就ok了,点击事件函数会执行以key值命名的对应函数。

Logo

前往低代码交流专区

更多推荐