关于#vue.js#的问题：求vue组件
一个vue组件 实现下图效果(对于内容相同的表格实现跨行合并，最后一行实现跨列合并)，且表格中序号、学校、年级、班级、姓名几列不可编辑，语文、数学两列可编辑，再实现分页效果，可自定义每页显示记录数
学习VUE最好的方式就是去官网
这个是需要和后台数据配合使用吧。table有合并的标签
我去给你百度了
表格合并 参考地址 https://blog.csdn.net/Dark_programmer/article/details/119805108
合计行合并 参考地址https://blog.csdn.net/m0_60622481/article/details/125632573
elementui el-table 组件应该能满足你的需求
看elementui
1.先手写一个样式一样的表格
2.再加上编辑功能
3.合并单元格其实就是根据条件判断是否需要加下边框的问题了
我这边没有完全一样的，有类似的
https://element.eleme.cn/#/zh-CN/component/table
el-table可以实现
可以使用饿了么的表格组件，支持单元格合并、表尾合计行。这两个可以看我的教程：
单元格合计：https://blog.csdn.net/weixin_41897680/article/details/121924063
单元格合并：https://blog.csdn.net/weixin_41897680/article/details/121837200
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<style>
table {
border-collapse: collapse;
}
</style>
</head>
<body>
<div id="app">
<table border>
<tr>
<th colspan="7">榕城区小学成绩单</th>
</tr>
<tr>
<td v-for="(item,index) in tableHead" :key="index">{{item}}</td>
</tr>
<tr v-for="(item,index) in tableData" :key="index">
<td>{{index+1}}</td>
<td :rowspan="item.rowspan" v-show="item.school">{{item.school}}</td>
<td :rowspan="item.childRowspan" v-show="item.grade">{{item.grade}}</td>
<td>{{item.calss}}</td>
<td>{{item.name}}</td>
<td><input type="text" v-model="item.yw"></td>
<td><input type="text" v-model="item.sx"></td>
</tr>
<tr v-for="(item,index) in tableFood" :key="index">
<td :colspan="item.colspan" v-show="item.name" >{{item.name}}</td>
<td >{{item.total}}</td>
<td >{{item.total2}}</td>
</tr>
</table>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
tableHead: ['序号', '学校', '年级', '班级', '姓名', '语文', '数学'],
tableData: [
// 第一中学
{
rowspan: '9',
childRowspan: 3,
school: '第一小学',
grade: '1年级',
calss: '1班',
name: '张三',
yw: '语文',
sx: '数学',
}, {
school: '',
grade: '',
calss: '2班',
name: '张三',
yw: '语文',
sx: '数学',
}, {
school: '',
grade: '',
calss: '3班',
name: '张三',
yw: '语文',
sx: '数学',
},
{
childRowspan: 3,
school: '',
grade: '2年级',
calss: '1班',
name: '张三',
yw: '语文',
sx: '数学',
}, {
school: '',
grade: '',
calss: '2班',
name: '张三',
yw: '语文',
sx: '数学',
}, {
school: '',
grade: '',
calss: '3班',
name: '张三',
yw: '语文',
sx: '数学',
},
{
childRowspan: 3,
school: '',
grade: '3年级',
calss: '1班',
name: '张三',
yw: '语文',
sx: '数学',
}, {
school: '',
grade: '',
calss: '2班',
name: '张三',
yw: '语文',
sx: '数学',
}, {
school: '',
grade: '',
calss: '3班',
name: '张三',
yw: '语文',
sx: '数学',
},
// 实验小学
{
rowspan: '6',
childRowspan: 2,
school: '实验小学',
grade: '1年级',
calss: '1班',
name: '张三',
yw: '语文',
sx: '数学',
}, {
school: '',
grade: '',
calss: '2班',
name: '张三',
yw: '语文',
sx: '数学',
},
{
childRowspan: 2,
school: '',
grade: '2年级',
calss: '1班',
name: '张三',
yw: '语文',
sx: '数学',
}, {
school: '',
grade: '',
calss: '2班',
name: '张三',
yw: '语文',
sx: '数学',
},
{
childRowspan: 2,
school: '',
grade: '3年级',
calss: '1班',
name: '张三',
yw: '语文',
sx: '数学',
},
{
school: '',
grade: '',
calss: '2班',
name: '张三',
yw: '语文',
sx: '数学',
},
// 附属中学
{
rowspan: '3',
school: '附属中学',
grade: '1年级',
calss: '1班',
name: '张三',
yw: '语文',
sx: '数学',
}, {
school: '',
grade: '2年级',
calss: '2班',
name: '张三',
yw: '语文',
sx: '数学',
},
{
school: '',
grade: '3年级',
calss: '3班',
name: '张三',
yw: '语文',
sx: '数学',
},
],
tableFood:[{
colspan:5,
name:'合计',
total:1,
total2:2
}],
message: 'Hello Vue!'
}
})
</script>
</body>
</html>