vue制作表格，内容过多用“...”代替，鼠标悬停显示全部内容，vue分页，模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/base.css" media="all">
</head>
<body>
<h2 id="pmTitle"></h2>
<div id="pm-list-table">
    <table>
        <thead>
        <tr>
            <th>序号</th>
            <th>会议主题</th>
            <th>组织名</th>
            <th>支部书记</th>
            <th>参加人数</th>
            <th>会议地点</th>
            <th>会议时间</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item,index in pmList">
            <td>
                <div>{{index+1}}</div>
            </td>
            <td>
                <div @mouseover="show" @mouseout="hide">{{item.meetingTitle}}</div>
            </td>
            <td>
                <div @mouseover="show" @mouseout="hide">{{item.orgName}}</div>
            </td>
            <td>
                <div>{{item.partySecretary}}</div>
            </td>
            <td>
                <div>{{item.partyMemberCount}}</div>
            </td>
            <td>
                <div @mouseover="show" @mouseout="hide">{{item.meetingSite}}</div>
            </td>
            <td>
                <div>{{riqi(item.meetingTime)}}</div>
            </td>
        </tr>
        <tr v-if="pmList.length==0">
            <td colspan="10">暂无数据</td>
        </tr>
        </tbody>
    </table>
</div>
<div id="pm-list-table-page"></div>
<script src="/js/jquery-1.11.2.min.js" type="application/javascript"></script>
<script src="/js/utils.js" type="application/javascript"></script>
<script src="/base/constant.js" type="application/javascript"></script>
<script src="/base/base.js" type="application/javascript"></script>
<script src="/layui/layui.js" type="application/javascript"></script>
<script src="/vue/vue.min.js" type="application/javascript"></script>
<script src="/echarts/echarts.min.js" type="text/javascript"></script>
<style>
    body {
        width: 100%;
        height: 100vh;
        /*background: rgba(25, 56, 107, 1);*/
        background: url("/img/second_body_bg.png");
    }

    #pmTitle {
        text-align: center;
        color: white;
        padding: 15px 0;
        background: url("/img/second_title_bg.png");
    }

    #pm-list-table {
        margin: 2% 2% 0 2%;
        text-align: center;
    }

    #pm-list-table table {
        width: 100%;
        color: white;
        border-collapse: separate;
        border-spacing: 0px 15px;
    }

    #pm-list-table table th, #pm-list-table table td {
        padding: 10px 0;
    }

    #pm-list-table table th {
        font-size: 18px;
        width: calc(100vw / 8);
    }

    #pm-list-table table td {
        font-size: 16px;
        width: calc(100vw / 8);
        position: relative;
        cursor: pointer;
    }

    #pm-list-table table td > div {
        width: 100%;
        word-break: break-all;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    #pm-list-table table td > div.this {
        position: absolute;
        top: 0;
        left: 0;
        -webkit-line-clamp: 10;
        z-index: 1;
        padding-top: 10px;
        background-color: rgba(10, 77, 154, 1);
    }

    #pm-list-table table thead {
        background-color: rgba(10, 77, 154, 1);
    }

    #pm-list-table tbody tr, #pm-list-table tbody tr td {
        background: rgba(21, 64, 118, 1);
    }

    #pm-list-table-page {
        text-align: right;
        margin-right: 2%;
    }

    .layui-laypage a, .layui-laypage span {
        background: none;
        color: white;
    }

    .layui-laypage .layui-laypage-curr .layui-laypage-em {
        background-color: rgba(30, 159, 255, 1);
    }

</style>
<script>
    layui.use(['layer', 'jquery', 'table', 'laypage'], function () {
        var layer = layui.layer, $ = layui.$, table = layui.table, laypage = layui.laypage;

        var pmTitle = new Vue({
            el: '#pmTitle',
            data: {
                pmTitle: ""
            },

        });
        var str = request.QueryString('type')
        var titleName = request.QueryString('shykName')
        var orgId = request.QueryString('orgId')
        var pmList = new Vue({
            el: '#pm-list-table',
            data: {
                pmList: [],
                pmCount: '',
            },
            methods: {
                loadList: function (param) {

                    $.ajax({
                        type: "post",
                        url: "/shyk/shykOrgList",
                        data: {
                            'type': str,
                            'orgId': orgId
                        },
                        dataType: "json",
                        success: function (res) {
                            if (res.StateCode == 200) {
                                pmList.pmList = res.Data;
                                pmList.pmCount = res.DataCount;
                            }
                        }
                    })
                },
                show: function (event) {
                    $(event.target).addClass("this");
                },
                hide: function (event) {
                    $(event.target).removeClass("this")
                },
                riqi: function (str) {
                    return str.substring(0, 10)
                }
            }

        })


        $("#pmTitle").text(titleName + "会议列表");
        var params = {};
        pmList.loadList(params);
        var pageModel = setInterval(function () {
            if (pmList.pmCount != '') {
                laypage.render({
                    elem: 'pm-list-table-page'
                    , count: pmList.pmCount
                    , layout: ['prev', 'page', 'next']
                    , jump: function (obj, first) {
                        if (!first) {
                            // layer.msg('第 ' + obj.curr + ' 页');
                            params["page"] = obj.curr;
                            pmList.loadList(params);
                        }
                    }
                });
                clearInterval(pageModel)
            }
        }, 10);
    });
</script>
</body>
</html>
vue制作表格，内容过多用“...”代替，鼠标悬停显示全部内容，vue分页，模板

猜你喜欢
