美文网首页vueVueJS必备
elementUI 在el-row 或者 el-col 上使用@

elementUI 在el-row 或者 el-col 上使用@

作者: 读书的鱼 | 来源:发表于2018-12-14 17:11 被阅读4799次

今天在使用element-ui中Card组件的时候,发现不管我在el-row、el-col、还是el-card添加点击事件@click="handleClick",都无法触发点击事件,但是在div或者其他自己写的标签添加点击事件,发现就没有这个问题,所以我准备在el-card外层添加一个div来添加点击事件。
但是自己还是不甘心,为什么要多些一段冗余的div呢?查阅一下发现@click.native="handleClick"就能成功解决这个问题。代码如下:

<el-row class="row-ul">
    <el-col
      :span="4"
      v-for="(item) in list"
      :key="item.id"
      class="row-li"
      @click.native="handleClick"  // @click="handleClick"  改为: @click.native="handleClick" 
    >
      <el-card :body-style="{ padding: '5px' }" >
        hello
      </el-card>
    </el-col>
  </el-row>

相关文章