vue循环行中鼠标控制单元格浮动层

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    
    <title>Title</title>
</head>
<style type="text/css">
    .upper_limit_notice4 {
        width: 79px;
        height: 22px;
        text-align: left;
        background-color: #ffffff;
        border: #B5B5B5 1px solid;
        line-height: 22px;
    }
    .asyno{
        width:182px;
        height: 50px;
        line-height: 18px;resize: none;
        position: absolute;
        right: 80px;
        top: 0px;
    }

    .datagrid-cell{width:76px; height:auto;/*overflow: hidden;text-overflow:ellipsis;white-space:nowrap;*/white-space: normal;}
    .fitting_p { position: absolute; left: 77px;top: 0px; width: 275px; height: 50px; padding: 8px; overflow-y:auto; background: #dedede; border: 1px solid #ccc; z-index: 200;text-align: left;white-space: normal;}
</style>
<body>
<tbody id="List">
    <tr v-for="(item,index) in list">
        
        <td style="width:77px;line-height: inherit;position: relative;">
            <div class="datagrid-cell" v-on:mouseover="mouseopenFn(item.curID)" v-on:mouseout="mousecloseFn(item.curID)">
                <!-- {{item.Customer_Name}} -->
                {{item.Customer_Name.length>9 ? item.Customer_Name.slice(0,9)+'...' : item.Customer_Name}}
                <span style="display:none;" class="fitting_p" v-bind:id="'PLPWin'+(item.curID)">{{item.Customer_Name}}</span>
            </div>
        </td>
        
        <td style="width:79px; line-height: 0px;position: relative;overflow: inherit;">
            <input type="text" style="width: 79px;" v-bind:id="'Synopsis'+(item.curID)" class="upper_limit_notice4" v-model="item.texta" v-on:focus="synoFoc(item.curID)">
            <textarea class="asyno" rows="4" style="display: none;" v-bind:id="'ASynopsis'+(item.curID)" v-model="item.texta" v-on:blur="synoBlu(item.curID)" maxlength="100"></textarea>
        </td>
        
    </tr>
</tbody>

</body>

<script type="text/javascript">
methods:{
    synoFoc: function (curID){
        var id = 'Synopsis'
        // console.log(curID);
        $("#ASynopsis"+curID).val($("#Synopsis"+curID).val())
        $("#ASynopsis"+curID).show()
        $("#ASynopsis"+curID).focus()
    },
    synoBlu: function (curID){
        var id = 'ASynopsis'
        // console.log(curID);
        $("#Synopsis"+curID).val($("#ASynopsis"+curID).val())
        $("#ASynopsis"+curID).hide()
    },
    mouseopenFn: function (ind){
        $("#PLPWin"+ind).show();
    },
    mousecloseFn: function (ind) {
        $("#PLPWin"+ind).hide();
    },
}

</script>

</html>

 

posted @ 2024-12-27 16:28  石头记1  阅读(6)  评论(0)    收藏  举报