Vue 鼠标获取表格当前行的td

刺骨的言语ヽ痛彻心扉 2023-06-23 05:56 8阅读 0赞

## **效果图** ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NDMxMzAz_size_16_color_FFFFFF_t_70]

## 前端页面 ##

<tr v-for="(ar,index) in arList" v-on:mouseenter="showtt(index)">
                <td>{
       {index}}</td>
                <td>{
       {ar.id}}</td>
                <td>{
       {ar.title}}</td>
                <td>{
       {ar.authorid}}</td>
                <td>{
       {ar.createtime}}</td>
    
                <td v-if="ar.state == '0'">审核中</td>
                <td v-else-if="ar.state == '1'">审核未通过</td>
                <td v-else="ar.state == '2'">审核已通过</td>
                <td>
                    <button @click="findOne(company.id)" type="button">修改</button>
                    <button @click="deleteOne(company.id)" type="button">删除</button>
                </td>
            </tr>

## js ##

new Vue({ 
        el:"#app",
        data:{ 
            arList : [],
            company : { "id":""},
            titt :""
        },
        methods:{ 
            showtt(index){ 
               // alert(index);
                console.log(this.arList[index].title);
                this.titt = this.arList[index].title;
            },
            findall(){ 
                    axios.get("/api/exam-user/ar").then(resp=>{ 
                        console.log(resp.data);
                        this.arList = resp.data;
                    })
                }
        },
        created(){ //页面启动之后
            this.findall();
        }
    
    
    })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NDMxMzAz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191217174115537.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NDMxMzAz,size_16,color_FFFFFF,t_70