鍍金池/ 問答/iOS  HTML/ 新人小白,求大佬告知

新人小白,求大佬告知

問題描述

這篇代碼完事是一篇表格,我想給表格添加點(diǎn)擊事件,點(diǎn)擊表格某一行,把這行id傳給另一個頁面,怎么寫,求大佬幫忙寫下,可以加qq1206775259加qq時,麻煩加一下備注,謝謝大佬

問題出現(xiàn)的環(huán)境背景及自己嘗試過哪些方法

相關(guān)代碼

// 請把代碼文本粘貼到下方(請勿用圖片代替代碼)
<template>
    <div id="spy">    
        <table class="num" >
            <thead  style="background: #4ccfc0; color: #FFFFFF;line-height: 30px;">
                <th>名稱</th>
                <th>創(chuàng)建時間</th>
                <th>位置圖片</th>
                <th>電源圖片</th>
            </thead>
            
            <tbody  class="ncc">
                <tr v-for="spc in heads">
                    <td>{{spc.title}}</td>
                    <td>{{spc._sys_createtime}}</td>
                    <td>{{spc.wztp}}</td>
                    <td>{{spc.dytp}}</td>
                </tr>    
                <tr>
                    <td colspan="4">沒有更多數(shù)據(jù)了</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>
<script>
import qs from 'qs';
import { MessageBox } from 'mint-ui';
import { Indicator } from 'mint-ui';
export default {
    data(){
        return{
            heads:''
             
        }
    },  
    methods :{
        loadMore() {        

        },
        goback(){            
            //Indicator.open("請稍后...");
            var params = {"fields":'title,_sys_createtime,wztp,dytp', "_setfield":'', "currentPage":1}                              //動態(tài)trvalid
            this.$axios({
                url: this.$store.state.domain + '/_db/sxjck',                             //用于請求的服務(wù)器url
                method: 'POST',                                                             //創(chuàng)建請求時用的方法
                headers: {                                                                  //是即將被發(fā)送的自定義請求
                    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
                },
                data: qs.stringify(params)
            })
            .then((data)=>{         
                console.log(data);
                this.heads = data.data.sxjck
            })
            .catch(function (error) {
                console.log(error);
            });
        }
    },  
    created(){
        
    },
    mounted(){
        
    },
    beforeRouteEnter(to,from,next){
         const toDepth = to.path.split('/').length;
        const fromDepth = from.path.split('/').length;
        if(toDepth<fromDepth){
            to.meta.isBack = true;
        }
        next();
    },
    activated() {
      if(!this.$route.meta.isBack){
        // 如果isBack是false,表明需要獲取新數(shù)據(jù),否則就不再請求,直接使用緩存的數(shù)據(jù)
//        alert("333")
        this.goback();
        this.$store.commit("saveScoutCopyId", '');
        this.$store.state.wztpnum = 0;
        this.$store.state.dytpnum = 0;
      }
      // 恢復(fù)成默認(rèn)的false,避免isBack一直是true,導(dǎo)致下次無法獲取數(shù)據(jù)
      this.$route.meta.isBack=false
    
    }
}
</script>

<style scoped>
    .num{ width: 1214px;  border:1px solid #f60; } 
    .ncc{ text-align: center;}        
</style>

你期待的結(jié)果是什么?實(shí)際看到的錯誤信息又是什么?

回答
編輯回答
熊出沒
//你說 “點(diǎn)擊表格某一行,把這行id傳給另一個頁面”

//我想你的意思應(yīng)該是點(diǎn)擊表格的這一行打開另一個頁面,把選中行Id傳到這個新頁面上來。應(yīng)該是這個意思吧。

//要想把選中行的編號傳給下一頁面,首先肯定要把編號綁定在列表上

//然后,你可以設(shè)置按鈕在行的后面,把Id值通過地址欄傳過去,具體操作如下。

<div id="spy">    
    <table class="num" >
        <thead  style="background: #4ccfc0; color: #FFFFFF;line-height: 30px;">
            <th>編號</th>   //編號列
            <th>名稱</th>
            <th>創(chuàng)建時間</th>
            <th>位置圖片</th>
            <th>電源圖片</th>
        </thead>
        
        <tbody  class="ncc">
            <tr v-for="spc in heads">
                <td>
                   {{spc.Id}}   //綁定你的編號Id
                   <a  href="/Employee/WebSiteModule/Insert?Id=110">跳轉(zhuǎn)</a>  //跳轉(zhuǎn)按鈕,通過地址欄把Id傳過去,我這里隨便寫的地址,你自己寫你自己的就行
                </td>
                <td>{{spc.title}}</td>
                <td>{{spc._sys_createtime}}</td>
                <td>{{spc.wztp}}</td>
                <td>{{spc.dytp}}</td>
            </tr>    
            <tr>
                <td colspan="4">沒有更多數(shù)據(jù)了</td>
            </tr>
        </tbody>
    </table>
</div>

2017年5月23日 06:25