如:下图
template部分
<el-table
:data="tableData"
:span-method="objectSpanMethod"
border
style="width: 100%; margin-top: 20px"
>
<el-table-column prop="one" label="一级菜单" width="180">
<template slot-scope="scope">
<input type="checkbox" />
<span style="margin-left: 10px">{{ scope.row.one }}</span>
</template>
</el-table-column>
<el-table-column prop="two" label="二级菜单" width="380">
<template slot-scope="scope">
<input type="checkbox" v-if="scope.row.two !== ''" />
<span style="margin-left: 10px">{{ scope.row.two }}</span>
</template>
</el-table-column>
<el-table-column prop="caozuo" label="操作">
<template slot-scope="scope">
<input type="checkbox" v-if="scope.row.caozuo.uper !== ''" />
<span style="margin-left: 10px;margin-right:18px">{{ scope.row.caozuo.uper }}</span>
<input type="checkbox" v-if="scope.row.caozuo.edit !== ''" />
<span style="margin-left: 10px;margin-right:18px">{{ scope.row.caozuo.edit }}</span>
<input type="checkbox" v-if="scope.row.caozuo.del !== ''" />
<span style="margin-left: 10px;margin-right:18px">{{ scope.row.caozuo.del }}</span>
<input type="checkbox" v-if="scope.row.caozuo.sh !== ''" />
<span style="margin-left: 10px;margin-right:18px">{{ scope.row.caozuo.sh }}</span>
</template>
</el-table-column>
</el-table>
2.数据data
tableData: [
{
one: '首页',
two: '',
caozuo: {
uper: '',
edit: '',
del: '',
sh: ''
}
},
{
one: '运营管理',
two: '运行商管理',
caozuo: {
uper: '新增',
edit: '编辑',
del: '删除',
sh: '审核'
}
},
{
one: '运营管理',
two: '充电站管理',
caozuo: {
uper: '新增',
edit: '编辑',
del: '删除',
sh: '审核'
}
},
{
one: '运营管理',
two: '充电桩管理',
caozuo: {
uper: '新增',
edit: '编辑',
del: '删除',
sh: '审核'
}
},
{
one: '运营管理',
two: '充电桩远程升级',
caozuo: {
uper: '新增',
edit: '编辑',
del: '删除',
sh: '审核'
}
},
{
one: '运营管理',
two: '充电桩价格维护',
caozuo: {
uper: '新增',
edit: '编辑',
del: '删除',
sh: '审核'
}
},
{
one: '订单管理',
two: '充电订单记录',
caozuo: {
uper: '新增',
edit: '编辑',
del: '删除',
sh: '审核'
}
},
{
one: '订单管理',
two: '充电订单评价管理',
caozuo: {
uper: '新增',
edit: '编辑',
del: '删除',
sh: '审核'
}
},
{
one: '订单管理',
two: '充值订单记录',
caozuo: {
uper: '新增',
edit: '编辑',
del: '删除',
sh: '审核'
}
},
{
one: '订单管理',
two: '退款订单记录',
caozuo: {
uper: '新增',
edit: '编辑',
del: '删除',
sh: '审核'
}
},
{
one: '订单管理',
two: '退款订单记录',
caozuo: {
uper: '新增',
edit: '编辑',
del: '删除',
sh: '审核'
}
},
{
one: '客户管理',
two: '客户信息',
caozuo: {
uper: '新增',
edit: '编辑',
del: '删除',
sh: '审核'
}
},
{
one: '客户管理',
two: '套餐管理',
caozuo: {
uper: '新增',
edit: '编辑',
del: '删除',
sh: '审核'
}
},
{
one: '系统管理',
two: '角色管理',
caozuo: {
uper: '新增',
edit: '编辑',
del: '删除',
sh: '审核'
}
}
]
3.js部分 - 注意这个方法写在methods里面
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) { // 合并的是第几列
switch (rowIndex) {
case 0: // 第一行
return {
rowspan: 1,
colspan: 1
};
case 1: // 第二行
return {
rowspan: 5, // 合并五行
colspan: 1 // 第一列
};
case 6:
return {
rowspan: 4,
colspan: 1
};
case 10:
return {
rowspan: 2,
colspan: 1
};
case 12:
return {
rowspan: 2,
colspan: 1
};
default:
return {
rowspan: 0,
colspan: 0
};
}
}
}
4.当数据后台返回为动态数据
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
// 合并的是第几列
if (row.rowSpan === '0') {
return {
rowspan: row.num,
colspan: 1
};
} else {
return {
rowspan: 0,
colspan: 0
};
}
}
},
将数据,自己在组装过,每条数据里面加入是否合并的标识
每个合并时候的第一个数据,有一个标识,数据合并的num,可以组装的时候计算好
对于这个案例,补充一下多选框,多选框其实在这是有两个功能,一个是一级和二级联动,一个是将选中的数据传递给后台
先说一下自己的思路,是将一级和二级存在一个联动关系,可以根据二级去判断一级是否选中或者未选中,这里其实没有做一级选中,二级全部选中,一级取消二级全部取消。只做了二级对一级的影响,其实做也做,只是当时做这个的时候场景对二级更看中。
<el-table
:data="tableData"
:span-method="objectSpanMethod"
border
style="width: 100%; margin-top: 20px"
>
<el-table-column prop="mainLabel" label="一级菜单" width="180">
<template slot-scope="scope">
<input type="checkbox" :value="scope.row.mainId" v-model="scope.row.parentSelected" :disabled ="scope.row.ParentDisable"/>
<span style="margin-left: 10px">{{ scope.row.mainLabel }}</span>
</template>
</el-table-column>
<el-table-column prop="label" label="二级菜单" width="380">
<template slot-scope="scope">
<input
type="checkbox"
:value="scope.row.id"
v-model="scope.row.selected"
@change="changeSelect(scope.row,scope.$index)"
/>
<span style="margin-left: 10px">{{ scope.row.label}}</span>
</template>
</el-table-column>
<el-table-column prop="caozuo" label="操作">
<template slot-scope="scope">
<span v-for="(item,index) in scope.row.caozuo" :key="index">
<input
type="checkbox"
v-if="item.name !== ''"
v-model="item.itemCheck"
@change="fliterCheck( scope.row.caozuo,index)"
/>
<span style="margin-left: 10px;margin-right:18px">{{ item.name }}</span>
</span>
</template>
</el-table-column>
</el-table>
下面是二级操作时候,改变一级的状态
确定的时候,从数据中筛选出选中的数据就行了,其实这代码写的不是很好,因为太多遍历了,但是当时时间紧凑,也没有来的急修改,然后然后然后就被遗忘了
总结一下,记得当时做这个也很头疼,这个功能设涉及了动态表单的合并,多选框的联动在里面,回显编辑,新增等等。其实最重要的是一个数据结构,就是table的每一行的数据结构是什么样子,这个决定了很多逻辑,,这个是案例的一个根据后端返回的数据重新拼凑的一个数据结构
其实vue,react这些用数据驱动视图的框架,在做前端的时候,很多时候都是一个数据结构的问题,去拼凑想要的数据结构完成功能