数据表格内按钮居中

提问 未结 4 154
priest17948
priest17948 2020-2-13
悬赏:20飞吻
版本:layui 浏览器:
使用数据表格,多个按钮在单元格内垂直居中,单个按钮始终偏上,这种情况怎么处理?请各位教教...谢谢
回帖
  • <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>表格</title>
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
    <style>
    .container {
    padding: 30px
    }
    </style>
    </head>
    <body>
    <div class="container">
    <div class="myTable" lay-filter="myTable"></div>
    </div>

    <div class="container">
    <div class="myTable2" lay-filter="myTable2"></div>
    </div>

    <script type="text/html" id="tableTool">
    <a class="layui-btn layui-btn-xs" lay-event="detail">详情</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
    </script>

    <script type="text/html" id="tableTool2">
    <!-- 使用了layui-btn-container 会有间距-->
    <div class="layui-btn-container">
    <a class="layui-btn layui-btn-xs" lay-event="detail">详情</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
    </div>
    </script>
    <script type="text/javascript" src="https://www.layuicdn.com/layui/layui.js"></script>
    <script>
    var view = {
    data: {
    list: [
    {id: 1, name: '张三', city: '北京', age: 18},
    {id: 2, name: '张三', city: '北京', age: 18},
    {id: 3, name: '张三', city: '北京', age: 18},
    {id: 4, name: '张三', city: '北京', age: 18},
    {id: 5, name: '张三', city: '北京', age: 18},
    {id: 6, name: '张三', city: '北京', age: 18},
    ]
    },
    layui: '',
    loadTableData: function() {
    var _this = this;
    layui.table.render({
    elem: '.myTable',
    cols: [[
    {field: 'id', title: 'ID', width: 100, align: 'center', fixed: 'left'},
    {field: 'name', title: '姓名', width: 100, align: 'center'},
    {field: 'city', title: '城市', width: 100, align: 'center'},
    {field: 'age', title: '年龄', width: 100, align: 'center'},
    {title: '操作', minWidth: 120, align: 'center', fixed: 'right', templet: function(obj) {
    return $('#tableTool').html();
    }},
    ]],
    width: 600,
    data: _this.data.list
    })

    layui.table.render({
    elem: '.myTable2',
    cols: [[
    {field: 'id', title: 'ID', width: 100, align: 'center', fixed: 'left'},
    {field: 'name', title: '姓名', width: 100, align: 'center'},
    {field: 'city', title: '城市', width: 100, align: 'center'},
    {field: 'age', title: '年龄', width: 100, align: 'center'},
    {title: '操作', minWidth: 120, align: 'center', fixed: 'right', templet: function(obj) {
    return $('#tableTool2').html();
    }},
    ]],
    width: 600,
    data: _this.data.list
    })
    },
    bindEvent: function() {
    layui.table.on('tool(myTable)', function(obj) {
    var event = obj.event;
    var data = obj.data;
    switch(event) {
    case "detail":
    layer.msg('点击了详情');
    break;
    case "del":
    layer.msg('点击了删除');
    break;
    }
    })

    layui.table.on('tool(myTable2)', function(obj) {
    var event = obj.event;
    var data = obj.data;
    switch(event) {
    case "detail":
    layer.msg('点击了详情');
    break;
    case "del":
    layer.msg('点击了删除');
    break;
    }
    })
    },
    init: function() {
    var _this = this;
    layui.use(['table', 'laytpl'], function() {
    _this.layui = layui;
    window.$ = layui.$;
    _this.loadTableData();
    _this.bindEvent();
    })
    }
    }

    view.init();
    </script>
    </body>
    </html>
    1 回复
  • 繁星654
    2020-2-13
    {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}

    fixed属性吧
    0 回复
  • @繁星654 试过了,好像没效果,fixed的功能官方说明好像是将当前列置于最左侧或最右侧
    0 回复
  • @希望的曙光 谢谢~么么哒~
    0 回复