vue框架 点击某行记录显示其详细信息

要求的效果:

点击某行记录(cell组件)后,显示这条记录的详细信息。

vue框架 点击某行记录显示其详细信息_第1张图片

  <!-- 通知部分 -->
<van-panel title="通知公告"  class="marginTop8">
  <div slot="header" class="van-cell van-panel__header ">
    <div class="van-cell__title">
      <span style="font-size:14px;font-weight:bold;">通知公告</span>
    </div>
    <div class="van-cell__value van-panel__header-value ">
      <span  class="aaa" @click="notice">更多</span>
    </div>
  </div>
  <van-cell-group v-for="list in notificationList">
    <van-cell  is-link @click="jump(list.id)"  :label="list.updateDate" :title="list.title">
      <template slot="title">
        <span v-if="list.isNewRecord">
          <van-tag plain type="danger">未读</van-tag>&nbsp;
        </span>
        <span v-else>
          <van-tag plain type="success">已读</van-tag>&nbsp;
        </span>
        <!-- {{list.title}} -->
        <span class="custom-title">{{list.title}}</span>
      </template>
    </van-cell>
  </van-cell-group>
</van-panel>
  <!-- /通知部分 -->

解决方案:
点击某条记录时,把记录的id传给详情页面(@click="jump(list.id)"

jump(id){
			this.$router.push({
				path:'/ba/noticeDetails',
				name:'ba-noticeDetails',
				params: {
					id:id
				}
			});
		},

在noticeDetails.vue文件中:

methods:{
    onClickLeft(){
      this.$router.push('/ba/notice');
    },
    initData(){
      let id=this.$route.params.id;
      notification({}).then(res=>{
        const data=res.data;
        for(var i=0;i<data.length;i++){
          if(id==data[i].id){
            console.log(data[i]);
            this.details=data[i];
            break;
          }
        }
      });
    },
  }

查找id==data[i].id的记录即可。

你可能感兴趣的:(对接)