elementUI合并行和列

最新推荐文章于 2024-05-17 17:55:19 发布

开发路上的AZhe

最新推荐文章于 2024-05-17 17:55:19 发布

阅读量917

点赞数 2

分类专栏：我对vue有初心文章标签： elementui vue

本文链接：https://blog.csdn.net/qq_43379916/article/details/118941759

版权

我对vue有初心专栏收录该内容

19 篇文章 1 订阅

订阅专栏

在这里插入图片描述
案列地址：https://jsrun.net/JX8Kp

完整代码

	<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>element-ui合并行和列</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
    </style>
</head>

<body>
    <div id="app">
        <h1>element-ui合并行和列</h1>
        <el-table :data="data" border :span-method="objectSpanMethod">
            <el-table-column prop="nickname" label="小小号">
            </el-table-column>
            <el-table-column prop="username" label="姓名">
            </el-table-column>
            <el-table-column prop="gender" label="性别">
                <template slot-scope="scope"> {{scope.row.gender == 0 ? '女' : '男'}} </template>
            </el-table-column>
            <el-table-column prop="age" label="年龄">
            </el-table-column>
        </el-table>
        <div>通过给table传入<el-link type="danger">span-method</el-link>方法可以实现合并行或列，方法的参数是一个对象，里面包含 <ul>
                <li>当前行row</li>
                <li>当前列column</li>
                <li>当前行号rowIndex</li>
                <li>当前列号columnIndex</li>
            </ul>四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。 </div>
        <br />
        <div> 注意：当前行号和当前列号都是从0开始 </div>
    </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                data: [{
                    id: 0,
                    nickname: '法外狂徒',
                    username: '张三',
                    gender: 1,
                    age: 18
                },
                {
                    id: 1,
                    nickname: '职业法师',
                    username: '刘海柱',
                    gender: 0,
                    age: 33
                }, {
                    id: 2,
                    nickname: '北大还行',
                    username: '撒贝宁',
                    gender: 1,
                    age: 18
                }, {
                    id: 3,
                    nickname: '悔创阿里',
                    username: '杰克马',
                    gender: 0,
                    age: 18
                }, {
                    id: 4,
                    nickname: '普通家庭',
                    username: '马化腾',
                    gender: 1,
                    age: 18
                }, {
                    id: 5,
                    nickname: '不知妻美',
                    username: '刘强东',
                    gender: 0,
                    age: 18
                }]
            }
        },
        methods: {
            objectSpanMethod({ row, column, rowIndex, columnIndex }) {
                if (columnIndex == 3) {
                    if (rowIndex == 0) {
                        //第四列  第一行  合并  六行1列
                        return [6, 1];
                    } else {
                        // 其它的全部不要渲染，不然撑大表格
                        return [0, 0]
                    }
                } else if (columnIndex == 0 && rowIndex == 0) {
                    // 第一列，第一行 合并 一行二列
                    return [1, 2]
                } else if (columnIndex == 1 && rowIndex == 0) {
                    // 第二列，第一行 [0,0] 不渲染该列
                    return [0, 0]
                }
                /*
                    每次合并行或者列时找准需要合并的地方，然后在确认合并几行几列
                */
            }
        }
    })
</script>

</html>

开发路上的AZhe

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
elementUI合并行和列

案列地址：https://jsrun.net/JX8Kp完整代码 <!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>element-ui合并行和列</title> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css".
复制链接

扫一扫