Vue事件委托

要求是:点击tbody中td携带所在行的参数跳转。
我们知道:过多的事件对于性能来说是很糟糕的,尤其在移动端,可以说是无法容忍。
结构:

  <ul @click="handleClick">
          <li v-for="(item, index) in data" :data-index="index">
            {{ item.text }}
          </li>
  </ul>
 或者:
  <tr v-for="(item, index) in tbodyArr" :key="index" @click="linkToDataInput(item)">
        <td>{{ ((index+1)+((currentPage-1)*10)) }}</td>
        <td>{{ item.branchname }}</td>
        <td>{{ item.status }}</td>
        <td>{{ item.updatetime }}</td>
  </tr>
  在methods:{
  			linkToDataInput(item) {
			        this.$router.push({
			          path: '/datainputprogress',
			          query: {
			            ordercode: item.ordercode,
			            shopname: item.shopname,
			            branchname: item.branchname,
			            mectypeflag: item.mectypeflag
			          }
			        })
			      },
  }

猜你喜欢

转载自blog.csdn.net/weixin_39407291/article/details/89466393
今日推荐