美文网首页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>
    

    相关文章

      网友评论

        本文标题:elementUI 在el-row 或者 el-col 上使用@

        本文链接:https://www.haomeiwen.com/subject/wlwghqtx.html