这样的一个jquery实现的表格功能,vue能实现吗?

效果图:
image.png

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script src="jquery-3.2.1.min.js"></script>
</head>

<body>
<script>
$(function() {
    var attr = [[1,2],[3,4,5],[6,7,8]];
    var $table = $('<table width="100%" border="1"  />');
    var $trs = null;
    attr.reverse().forEach(a => {
        if ($trs) {
            $trs = $.map(a, v => {
                var $td = $('<td />').text(v).attr('rowSpan', $trs.length);
                var $trs2 = $trs.clone();
                $trs2.first().prepend($td);
                return $trs2.toArray();
            });
            $trs = $($trs);
        } else {
            $trs = $.map(a, v => $('<tr />').append($('<td />').text(v))[0]);
            $trs = $($trs);
        }
    });
    $table.append($trs);
    $('#J_div').append($table);
});
</script>
<div id="J_div">
    
</div>
</body>
</html>

或者说vue来实现,这个 var attr = [[1,2],[3,4,5],[6,7,8]]; 数据不应该这样?

阅读 1.7k
3 个回答

vue肯定可以实现
你也可以直接把jq套进去用

我觉得你理解错误了, vue构建用户界面的渐进式框架,并不是UI框架,如果你需要呈现出你截图表单的UI,你可以使用element-UI,ant-design-vue,iview这样的UI样式库

新手上路,请多包涵

纯css也可以

推荐问题