如何点击第一行获取到第一行 的编号进行跳转 点击第二行获取第二行的数据进行跳转

使用layui,从后台动态拿到数据,如何点击第一行获取到第一行 的编号进行跳转
点击第二行获取第二行的数据进行跳转

img


 layui.use(['form', 'table'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table;//获取当前页面所有的table

        var columns = [
            {field: 'zdid', title: '工单编号', style:'width:10%',},
            {field:'zd_state',title:'使用归属组',  tyle:'width:10%', templet:function (c) {
                    return c.zd_state.access_network},  },
        ];






        //渲染表格
        table.render({
            elem: '#demo',//指定table的id
            url: '/zd/ceshicha',
            toolbar: '#toolbarDemo',
            done:function(res, curr ,count){
                $('th').css(({ 'text-align':'center','background-color': '#bdccea', 'color': 'black', 'font-weight': '500' }))
                $('layui-table-total.layui-table tbody tr').css({ 'color': 'red' });
                $('.layui-table-total.layui-table tbody tr').css({ 'background-color': '#ffffb4' });


                var that = this.elem.next(); res.data.forEach(function (item, index) {
                    //console.log(item.empName);item表示每列显示的数据
                    if (index % 2 == 0) {
                        var tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']")
                            .css(({'border-top':'1px solid black','border-bottom':'dashed','border-left':'1px','text-align':'center'}));
                    } else {
                        var tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']")
                            .css(({'border-top':'1px solid red','border-bottom':'dashed','text-align':'center'}));
                    }
                })
            },
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            method: "post",
            cols: [columns],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 15,
            page: true,
            skin: 'line'
        });

可以给tr加个点击事件。事件里传当前项的数据


//渲染表格
        table.render({
            elem: '#demo',//指定table的id
            url: '/zd/ceshicha',
            toolbar: '#toolbarDemo',
            done:function(res, curr ,count){
                $('th').css(({ 'text-align':'center','background-color': '#bdccea', 'color': 'black', 'font-weight': '500' }))
                $('layui-table-total.layui-table tbody tr').css({ 'color': 'red' });
                $('.layui-table-total.layui-table tbody tr').css({ 'background-color': '#ffffb4' });
 
 
                var that = this.elem.next(); res.data.forEach(function (item, index) {
                    //console.log(item.empName);item表示每列显示的数据
                    if (index % 2 == 0) {
                        var tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']")
                            .css(({'border-top':'1px solid black','border-bottom':'dashed','border-left':'1px','text-align':'center'}));
                    } else {
                        var tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']")
                            .css(({'border-top':'1px solid red','border-bottom':'dashed','text-align':'center'}));
                    }
                })
            },
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            method: "post",
            cols: [columns],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 15,
            page: true,
            skin: 'line'
        });
        //点击监听
        table.on('row(demo)', function (obj) {
                alert(obj.data.zdid);
         })
})
slot-scope="scope"
<!--使用scop.row 是获取当前行-->
scope.row

scope相当于一行的数据, scope.row相当于当前行的数据对象。这里就是用插槽 拿到当前行 row是个内置的属性 ,vue slot的scope传递值是父作用域中的源数据改变,值会同步改变。且{{scope.$index}}可以获取当前行的index。