需求：根据当前日期的所在周，拼接表格的内容并弹出弹窗
【示例图】
如图所示，右侧关于日期的th与td是通过template循环出来的
点击按钮可以切换批量选中的样式进行操作
点击按钮出现弹窗
【完整代码】
<template><div style="margin: 16px;"><p>This Monday is {{ pickRangeDate[0] }} and this Sunday is {{ pickRangeDate[1] }}</p><a-space><a-button type="primary" v-if="!isBatchSetting" @click="isBatchSetting = true">Batch Setting</a-button><a-button type="default" v-else @click="isBatchSetting = false">Exit</a-button><a-button type="primary" v-if="isBatchSetting" @click="handleAddEdit">Setting</a-button><a-button type="default" v-else>Import</a-button></a-space><a-table style="margin-top: 16px;" :columns="columns" :data-source="data":rowKey="(record) => { return record.id }" :pagination="false"><!-- th --><div v-for="(item) in dateData" :key="item.id" :slot="item.dateName"><span>{{ item.dateName }} {{ item.weekday }}</span></div><!-- td --><div v-for="(item, index) in dateData" :key="item.dateName" :slot="'data' + index"><template v-if="!isBatchSetting"><a-button size="small" v-if="item.data.length == 0" type="default" @click="handleAddEdit">State1</a-button><a-button size="small" v-else type="primary" ghost @click="handleAddEdit">State2({{ item.data.length }})</a-button></template><template v-else><a-checkbox @change="onChange"><span v-if="item.data.length == 0">State1</span><span v-else>State2({{ item.data.length }})</span></a-checkbox></template></div></a-table><a-modal v-model="visible" :maskClosable="false" :centered="true" title="title" @cancel="handleCancel"><div>modal content</div><template #footer><a-button key="cancel" type="default" @click="handleCancel">cancel</a-button><a-button key="submit" type="primary" @click="handleSave">save</a-button></template></a-modal></div>
</template>
<script>
import moment from 'moment';export default {created() {this.setMockData()this.setColData()// 得到本周一和周日let today = new Date();this.getStartAndEndOfWeek(today)},data() {return {visible: false,isBatchSetting: false,pickRangeDate: [], dateData: [],columns: [{title: 'TH',dataIndex: 'name',key: 'name',width: 120,}],data: [{id: 1000001,name: 'Row1'},{id: 1000002,name: 'Row2'},{id: 1000003,name: 'Row3'},{id: 1000004,name: 'Row4'},{id: 1000005,name: 'Row5'},],}},methods: {// 得到本周一到周日getStartAndEndOfWeek(date) {date = new Date(date);let currentDayOfWeek = date.getDay(); // 0 (Sunday) - 6 (Saturday)let start = new Date(date);let end = new Date(date);// 得到本周的周一start.setDate(start.getDate() - (currentDayOfWeek - 1) + (currentDayOfWeek === 0 ? -6 : 0));// 得到本周的周日end.setDate(end.getDate() + (7 - currentDayOfWeek) + (currentDayOfWeek === 0 ? 0 : 0));// 赋值this.pickRangeDate[0] = start.toISOString().split('T')[0]this.pickRangeDate[1] = end.toISOString().split('T')[0]},setMockData() {var weekDayArr = ["Mon.", "Tues.", "Wed.", "Thur.", "Fir.", "Sat.", "Sun."];// 调整今天的日期到本周的周一const today = new Date();const dayOfWeek = today.getDay(); // 0 表示周日，1-6 表示周一到周六today.setDate(today.getDate() - dayOfWeek + 1);// 把本周的7天放到this.dateData中for (var i = 0; i < 7; i++) {// 创建一个新的日期对象来表示这一天const day = new Date(today); // 将日期增加一天day.setDate(day.getDate() + i);let obj = {id: Date.now() + i,// 本周7天dateName: day.toISOString().split('T')[0],// 判断某个日期是周几weekday: weekDayArr[i],data: i == 0 ? [] : [{name: 'name001',value: 99}],}this.dateData.push(obj)}},setColData() {for (let i = 0; i < this.dateData.length; i++) {let dataColNmae = 'data' + ilet thObj = {slots: { title: this.dateData[i].dateName }, // 关键句，与dateData关联dataIndex: dataColNmae,key: dataColNmae,width: 140,scopedSlots: { customRender: 'data' + i }, // 关键句，与表格data的data做对应// customCell: this.cellClick // 点击表格Cell事件 这里没有用上，这里是直击点击button出弹窗}// ththis.columns.push(thObj)// tdfor (let j = 0; j < this.data.length; j++) {this.data[j][dataColNmae] = this.dateData[i].data}}},// 点击表格Cell事件 这里没有用上cellClick(record, index) {return {on: {click: event => {let dataIndex = event.target.closest('.ant-table-row-cell-break-word').cellIndex - 1;console.log(dataIndex)// 当前点击的行console.log(record)console.log(index)}}}},onChange(e) {console.log(`checked = ${e.target.checked}`);},// 弹窗取消handleCancel() {this.visible = false},handleAddEdit() {this.visible = true},handleSave() {console.log('handleSave');},}
}
</script>
【相关文章】
ant-design-vue, a-table,固定左侧2列，根据日期动态生成右侧表格数据_ant desgin 动态生成表格-CSDN博客
