vue项目中使用ant design vue表格合并单元格
vue项目中使用ant design vue表格合并单元格
背景
根据项目需求基于在vue项目中引入ant design vue框架下制作课程表样式
代码效果图如下
代码如下：
<template>
<div class="schedule-set-course">
<a-drawer title="排课" placement="right" width="70%" :visible="visible" @close="handleCancel">
<h2 v-if="record">
{{record.title}}课表
</h2>
<a-table :columns="columns" :data-source="data" bordered :pagination="false">
<!-- v-for="col in ['节次', '星期一', '星期二','星期三','星期四','星期五']" -->
<template slot="time" slot-scope="text, record, index">
<div key="time">
<template v-if="record.editable" >
<a-time-picker style="width: 70px;" :default-value="moment('00:00', 'HH:mm')" format="HH:mm" @change="(time, timeString) =>onChangeTime(time, timeString, record.key, 'time')" />
-
<a-time-picker style="width: 70px;" :default-value="moment('00:00', 'HH:mm')" format="HH:mm" @change="(time, timeString) =>onChangeTime2(time, timeString, record.key, 'time')" @openChange="openChange" />
</template>
<template v-else>
{{ text }}
</template>
</div>
</template>
<!-- 'time', -->
<template
v-for="col in [ 'mon', 'tue', 'wed', 'thurs', 'fri' ]"
:slot="col"
slot-scope="text, record, index"
>
<div :key="col">
<!-- <a-input
v-if="record.editable"
style="margin: -5px 0"
:value="text"
@change="e => handleChange(e.target.value, record.key, col)"
/> -->
<a-select
label-in-value
v-if="record.editable"
style="margin: -5px 0; width: 100px"
:value="text"
@change="e => handleChange(e.label, record.key, col)"
>
<!-- @change="handleChange1" :value="subject.id" -->
<a-select-option v-for="subject in subjectData" :value="subject.title">
{{subject.title}}
</a-select-option>
</a-select>
<template v-else>
{{ text }}
</template>
</div>
</template>
<template slot="operation" slot-scope="text, record, index">
<div class="editable-row-operations">
<span v-if="record.editable">
<a @click="() => save(record.key)">保存</a>
<a-popconfirm title="确定取消吗?" @confirm="() => cancel(record.key)">
<a>取消</a>
</a-popconfirm>
</span>
<span v-else>
<a :disabled="editingKey !== ''" @click="() => edit(record.key)">编辑</a>
</span>
</div>
</template>
</a-table>
<div class="primary">
<!-- <a-button type="primary" @click="preservation">确认保存</a-button> -->
<a-button @click="previousPage">返回</a-button>
</div>
</a-drawer>
</div>
</template>
<script>
import { getSubjectData } from '@/api/modular/school/jiaowuManage'
import moment from 'moment';
const renderContent = (value, row, index) => {
const obj = {
children: value,
attrs: {},
};
// 设置一个单元格
if (index === 0) {
obj.attrs.colSpan = 0;
}
if (index === 3) {
obj.attrs.colSpan = 0;
}
if (index === 6) {
obj.attrs.colSpan = 0;
}
return obj;
};
const columns = [
{
title: '时间',
dataIndex: 'time',
scopedSlots: { customRender: 'time' },
customRender: (text, row, index) => {
// 合并列
if (index == 0 || index == 3 || index === 6) {
return {
children: text,
attrs: {
colSpan: 7,
},
}
}
return text
}
},
{
title: '节次',
dataIndex: 'section',
width: 70,
scopedSlots: { customRender: 'section' },
align: 'center',
customRender: renderContent
},
{
title: '星期一',
dataIndex: 'mon',
scopedSlots: { customRender: 'mon' },
customRender: renderContent
},
{
title: '星期二',
dataIndex: 'tue',
scopedSlots: { customRender: 'tue' },
customRender: renderContent
},
{
title: '星期三',
dataIndex: 'wed',
scopedSlots: { customRender: 'wed' },
customRender: renderContent
},
{
title: '星期四',
dataIndex: 'thurs',
scopedSlots: { customRender: 'thurs' },
customRender: renderContent
},
{
title: '星期五',
dataIndex: 'fri',
scopedSlots: { customRender: 'fri' },
customRender: renderContent
}
// ,
// {
// title: '操作',
// dataIndex: 'operation',
// width: 200,
// scopedSlots: { customRender: 'operation' },
// },
];
const data = [{key: '0', time: '08:10-08:25 课前准备'}];
for (let i = 1; i < 11; i++) {
if(i == 3) {
data.push({key: i.toString(), time: '09:50-10:20 大课间活动'})
}
if(i == 6) {
data.push({key: i.toString(), time: '14:00-14:05 眼保健操'})
}
if(i != 3 && i != 6) {
data.push({
key: i.toString(),
time: '',
section: i,
mon: '',
tue: '',
wed: '',
thurs: '',
fri: ''
});
}
}
export default {
data() {
this.cacheData = data.map(item => ({ ...item }));
return {
visible: false,
data,
columns,
editingKey: '',
record: null,
subjectData: [],
moment
}
},
methods: {
init(record) {
this.record = record
this.visible = true
getSubjectData().then(res => {
this.subjectData = res.data.rows
})
},
handleSubmit(){
},
handleCancel(){
this.visible = false
},
handleChange(value, key, column) {
const newData = [...this.data];
const target = newData.find(item => key === item.key);
// console.log('value =>', value)
if (target) {
target[column] = value;
// newData.slice(Number(key) + 1)
// newData.push(target)
newData[key][column] = value
this.$nextTick(() => {
this.data = [...newData];
})
}
//
},
onChangeTime(time, timeString, key, column) {
const newData = [...this.data];
const target = newData.find(item => key === item.key);
if (target) {
target[column] = timeString;
this.data = newData;
}
},
onChangeTime2(time, timeString, key, column) {
const newData = [...this.data];
const target = newData.find(item => key === item.key);
if (target) {
target[column] = target[column] + '-' + timeString;
let t = target[column]
let tArr = t.split('-')
target[column] = tArr[0] + '-' + tArr[tArr.length-1]
this.data = newData;
}
},
openChange(e) {
},
edit(key) {
const newData = [...this.data];
const target = newData.find(item => key === item.key);
this.editingKey = key;
if (target) {
target.editable = true;
this.data = newData;
}
},
save(key) {
const newData = [...this.data];
const newCacheData = [...this.cacheData];
const target = newData.find(item => key === item.key);
const targetCache = newCacheData.find(item => key === item.key);
if (target && targetCache) {
delete target.editable;
this.data = newData;
Object.assign(targetCache, target);
this.cacheData = newCacheData;
}
this.editingKey = '';
},
cancel(key) {
const newData = [...this.data];
const target = newData.find(item => key === item.key);
this.editingKey = '';
if (target) {
Object.assign(target, this.cacheData.find(item => key === item.key));
delete target.editable;
this.data = newData;
}
},
handleChange1(e) {
},
preservation() {
},
previousPage() {
this.visible = false
}
}
}
</script>
<style lang="less" scoped>
.editable-row-operations a {
margin-right: 8px;
}
.primary {
// background-color: antiquewhite;
margin-top: 60px;
button {
margin-left: 20px;
&:nth-child(1) {
margin-left: 0px;
}
}
}
.schedule-set-course {}
</style>