本文介绍了数据仓库中常见的日期、月份、周几、星期几的枚举表示，以及如何处理Excel列号，包括快速生成和拼接。此外，还探讨了时间按15/30分钟间隔划分的方法，适用于移动端时间选择。同时，提供了在Vue中实现带圈序号匹配的两种方法，一种通过JavaScript字符串操作，另一种利用Map数据结构。最后，展示了如何快速构造Excel列号，并给出了优化代码的总结。
文章目录
假数据仓库-常见数据枚举（日期、月份、周几、星期几，前导零、Excel 列号）
日期相关规律数据
（用 excel 自动填充来生成也很方便）
["1","2","3","4","5","6","7","8","9","10","11","12"]
["01","02","03","04","05","06","07","08","09","10","11","12"]
["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"]
["01月","02月","03月","04月","05月","06月","07月","08月","09月","10月","11月","12月"]
["周一","周二","周三","周四","周五","周六","周日"]
["星期一","星期二","星期三","星期四","星期五","星期六","星期日"]
["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31"]
["01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31"]
["1日","2日","3日","4日","5日","6日","7日","8日","9日","10日","11日","12日","13日","14日","15日","16日","17日","18日","19日","20日","21日","22日","23日","24日","25日","26日","27日","28日","29日","30日","31日"]
["01日","02日","03日","04日","05日","06日","07日","08日","09日","10日","11日","12日","13日","14日","15日","16日","17日","18日","19日","20日","21日","22日","23日","24日","25日","26日","27日","28日","29日","30日","31日"]
["①", "②", "③", "④", "⑤", "⑥", "⑦", "⑧", "⑨", "⑩", "⑪", "⑫", "⑬", "⑭", "⑮", "⑯", "⑰", "⑱", "⑲", "⑳", "㉑", "㉒", "㉓", "㉔", "㉕", "㉖", "㉗", "㉘", "㉙", "㉚", "㉛", "㉜", "㉝", "㉞", "㉟", "㊱", "㊲", "㊳", "㊴", "㊵", "㊶", "㊷", "㊸", "㊹", "㊺", "㊻", "㊼", "㊽", "㊾", "㊿"]
其他规律数据
时间按指定间隔划分（15/30间隔，列出24小时内的所有时间点）
用于移动端某些选时间的场景（一般都是选日期，然后选具体时间，然后要求时间是15/30分钟一取整，方便用户选取）
// 按指定分钟间隔将一天切割成一个数组
function arraryTime (minute) {
var array_t = [];
var n = 60 / minute;
for (var i = 0; i < 24; i++) {
for (var j = 0; j < n; j++) {
var _i = i<10 ? '0'+i : i;
var _j = (minute * j)<10 ? '0'+(minute * j) : (minute * j);
array_t.push(_i + ':' + _j);
}
}
return array_t;
}
arraryTime(15)
// ['00:00', '00:15', '00:30', '00:45', '01:00', '01:15', '01:30', '01:45', '02:00', '02:15', '02:30', '02:45', '03:00', '03:15', '03:30', '03:45', '04:00', '04:15', '04:30', '04:45', '05:00', '05:15', '05:30', '05:45', '06:00', '06:15', '06:30', '06:45', '07:00', '07:15', '07:30', '07:45', '08:00', '08:15', '08:30', '08:45', '09:00', '09:15', '09:30', '09:45', '10:00', '10:15', '10:30', '10:45', '11:00', '11:15', '11:30', '11:45', '12:00', '12:15', '12:30', '12:45', '13:00', '13:15', '13:30', '13:45', '14:00', '14:15', '14:30', '14:45', '15:00', '15:15', '15:30', '15:45', '16:00', '16:15', '16:30', '16:45', '17:00', '17:15', '17:30', '17:45', '18:00', '18:15', '18:30', '18:45', '19:00', '19:15', '19:30', '19:45', '20:00', '20:15', '20:30', '20:45', '21:00', '21:15', '21:30', '21:45', '22:00', '22:15', '22:30', '22:45', '23:00', '23:15', '23:30', '23:45']
arraryTime(30)
// ['00:00', '00:30', '01:00', '01:30', '02:00', '02:30', '03:00', '03:30', '04:00', '04:30', '05:00', '05:30', '06:00', '06:30', '07:00', '07:30', '08:00', '08:30', '09:00', '09:30', '10:00', '10:30', '11:00', '11:30', '12:00', '12:30', '13:00', '13:30', '14:00', '14:30', '15:00', '15:30', '16:00', '16:30', '17:00', '17:30', '18:00', '18:30', '19:00', '19:30', '20:00', '20:30', '21:00', '21:30', '22:00', '22:30', '23:00', '23:30']
将日期拼接成指定格式
// 假设前面选定的日期是 2024.1.1 时间是 22:00
let day = "2024.1.1"
let time = "22:00"
// 转变为日期时间
let selectTime = new Date(day + ' '+ time)
console.log(selectTime)
// Mon Jan 01 2024 22:00:00 GMT+0800 (中国标准时间)
// 日期格式化函数
function formatDate(date, format) {
const dateType = Object.prototype.toString.call(date);
if (dateType !== '[object String]' && dateType !== '[object Date]' && dateType !== '[object Number]') {
date = new Date();
} else {
date = new Date(date);
// date无效
if (Number.isNaN(date.getTime())) {
date = new Date();
}
}
const args = {
'M+': date.getMonth() + 1,
'd+': date.getDate(),
'h+': date.getHours(),
'm+': date.getMinutes(),
's+': date.getSeconds(),
'q+': Math.floor((date.getMonth() + 3) / 3),
'S+': date.getMilliseconds()
};
if (/(y+)/i.test(format)) {
format = format.replace(RegExp.$1, (date.getFullYear().toString()).substr(4 - RegExp.$1.length));
}
if (/(w+)/i.test(format)) {
const week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
format = format.replace(RegExp.$1, week[date.getDay()]);
}
Object.getOwnPropertyNames(args).forEach((key) => {
if (new RegExp(`(${key})`, 'i').test(format)) {
format = format.replace(RegExp.$1, RegExp.$1.length === 1 ? item : (`00${args[key]}`).substr(args[key].toString().length));
}
});
return format;
}
// console.log(formatDate('', 'yyyy年MM月dd日 hh:mm:ss'))
// "2020年08月24日 10:39:59"
// console.log(formatDate('', 'yyyy年MM月dd日 hh时mm分ss秒'))
// "2020年08月24日 10时40分14秒"
console.log(formatDate(selectTime, "yyyy/MM/dd hh:mm"))
// 2024/01/01 22:00
// 一般拿到这个值就可以与后端进行交互了
带圈序号匹配
{{getCircleIndex(index) + scope.row.content}}
// ①巴拉巴拉巴拉……
methods: {
getCircleIndex (index) {
let indexList = ["①", "②", "③", "④", "⑤", "⑥", "⑦", "⑧", "⑨", "⑩", "⑪", "⑫", "⑬", "⑭", "⑮", "⑯", "⑰", "⑱", "⑲", "⑳", "㉑", "㉒", "㉓", "㉔", "㉕", "㉖", "㉗", "㉘", "㉙", "㉚", "㉛", "㉜", "㉝", "㉞", "㉟", "㊱", "㊲", "㊳", "㊴", "㊵", "㊶", "㊷", "㊸", "㊹", "㊺", "㊻", "㊼", "㊽", "㊾", "㊿"]
return indexList[index]
}
}
/* ↑ vue 中使用（js 拼接的方法相较 css 选择更加灵活可控，比较推荐） */
/* ↓ 利用方法批量生成 css */
function cssSnippet () {
let indexList = ["①", "②", "③", "④", "⑤", "⑥", "⑦", "⑧", "⑨", "⑩", "⑪", "⑫", "⑬", "⑭", "⑮", "⑯", "⑰", "⑱", "⑲", "⑳", "㉑", "㉒", "㉓", "㉔", "㉕", "㉖", "㉗", "㉘", "㉙", "㉚", "㉛", "㉜", "㉝", "㉞", "㉟", "㊱", "㊲", "㊳", "㊴", "㊵", "㊶", "㊷", "㊸", "㊹", "㊺", "㊻", "㊼", "㊽", "㊾", "㊿"]
let cssStr = ``
indexList.forEach((item, index) => {
cssStr += `.cell .numberIndex:nth-child(${1 + index})::before { content: "${item}"; }
`
})
console.log(cssStr)
}
cssSnippet()
/*
.cell .numberIndex:nth-child(1)::before { content: "①"; }
.cell .numberIndex:nth-child(2)::before { content: "②"; }
.cell .numberIndex:nth-child(3)::before { content: "③"; }
.cell .numberIndex:nth-child(4)::before { content: "④"; }
.cell .numberIndex:nth-child(5)::before { content: "⑤"; }
.cell .numberIndex:nth-child(6)::before { content: "⑥"; }
.cell .numberIndex:nth-child(7)::before { content: "⑦"; }
.cell .numberIndex:nth-child(8)::before { content: "⑧"; }
.cell .numberIndex:nth-child(9)::before { content: "⑨"; }
.cell .numberIndex:nth-child(10)::before { content: "⑩"; }
.cell .numberIndex:nth-child(11)::before { content: "⑪"; }
.cell .numberIndex:nth-child(12)::before { content: "⑫"; }
.cell .numberIndex:nth-child(13)::before { content: "⑬"; }
.cell .numberIndex:nth-child(14)::before { content: "⑭"; }
.cell .numberIndex:nth-child(15)::before { content: "⑮"; }
.cell .numberIndex:nth-child(16)::before { content: "⑯"; }
.cell .numberIndex:nth-child(17)::before { content: "⑰"; }
.cell .numberIndex:nth-child(18)::before { content: "⑱"; }
.cell .numberIndex:nth-child(19)::before { content: "⑲"; }
.cell .numberIndex:nth-child(20)::before { content: "⑳"; }
.cell .numberIndex:nth-child(21)::before { content: "㉑"; }
.cell .numberIndex:nth-child(22)::before { content: "㉒"; }
.cell .numberIndex:nth-child(23)::before { content: "㉓"; }
.cell .numberIndex:nth-child(24)::before { content: "㉔"; }
.cell .numberIndex:nth-child(25)::before { content: "㉕"; }
.cell .numberIndex:nth-child(26)::before { content: "㉖"; }
.cell .numberIndex:nth-child(27)::before { content: "㉗"; }
.cell .numberIndex:nth-child(28)::before { content: "㉘"; }
.cell .numberIndex:nth-child(29)::before { content: "㉙"; }
.cell .numberIndex:nth-child(30)::before { content: "㉚"; }
.cell .numberIndex:nth-child(31)::before { content: "㉛"; }
.cell .numberIndex:nth-child(32)::before { content: "㉜"; }
.cell .numberIndex:nth-child(33)::before { content: "㉝"; }
.cell .numberIndex:nth-child(34)::before { content: "㉞"; }
.cell .numberIndex:nth-child(35)::before { content: "㉟"; }
.cell .numberIndex:nth-child(36)::before { content: "㊱"; }
.cell .numberIndex:nth-child(37)::before { content: "㊲"; }
.cell .numberIndex:nth-child(38)::before { content: "㊳"; }
.cell .numberIndex:nth-child(39)::before { content: "㊴"; }
.cell .numberIndex:nth-child(40)::before { content: "㊵"; }
.cell .numberIndex:nth-child(41)::before { content: "㊶"; }
.cell .numberIndex:nth-child(42)::before { content: "㊷"; }
.cell .numberIndex:nth-child(43)::before { content: "㊸"; }
.cell .numberIndex:nth-child(44)::before { content: "㊹"; }
.cell .numberIndex:nth-child(45)::before { content: "㊺"; }
.cell .numberIndex:nth-child(46)::before { content: "㊻"; }
.cell .numberIndex:nth-child(47)::before { content: "㊼"; }
.cell .numberIndex:nth-child(48)::before { content: "㊽"; }
.cell .numberIndex:nth-child(49)::before { content: "㊾"; }
.cell .numberIndex:nth-child(50)::before { content: "㊿"; }
*/
快速凑出单元格列号（可快速扩展出常见的 excel 列号）
拼接原理
- 拿着排好序的26字母，利用 JS 字符串操作来拆解、拼接
/* 26 字母转单字母数组 */
const A_TO_Z_ARRAY = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("")
// ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]
/* AA-AZ */
const AA_TO_AZ_ARRAY = A_TO_Z_ARRAY.map(item => "A"+item)
// ["AA", "AB", "AC", "AD", "AE", "AF", "AG", "AH", "AI", "AJ", "AK", "AL", "AM", "AN", "AO", "AP", "AQ", "AR", "AS", "AT", "AU", "AV", "AW", "AX", "AY", "AZ"]
/* BA-BZ 方法同上（AA-AZ），把字母 A 换成 B 即可，...ZA-ZZ 同理 */
const BA_TO_BZ_ARRAY = A_TO_Z_ARRAY.map(item => "B"+item)
// ["BA", "BB", "BC", "BD", "BE", "BF", "BG", "BH", "BI", "BJ", "BK", "BL", "BM", "BN", "BO", "BP", "BQ", "BR", "BS", "BT", "BU", "BV", "BW", "BX", "BY", "BZ"]
// 连接数组（concat 不会改变原有数组，而是会返回一个新的数组）
let AToBZArray = A_TO_Z_ARRAY.concat(AA_TO_AZ_ARRAY, BA_TO_BZ_ARRAY)
// ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "AA", "AB", "AC", "AD", "AE", "AF", "AG", "AH", "AI", "AJ", "AK", "AL", "AM", "AN", "AO", "AP", "AQ", "AR", "AS", "AT", "AU", "AV", "AW", "AX", "AY", "AZ", "BA", "BB", "BC", "BD", "BE", "BF", "BG", "BH", "BI", "BJ", "BK", "BL", "BM", "BN", "BO", "BP", "BQ", "BR", "BS", "BT", "BU", "BV", "BW", "BX", "BY", "BZ"]
取得列号
/* 26 字母转单字母数组 */
const A_TO_Z_ARRAY = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("")
/* AA-AZ */
const AA_TO_AZ_ARRAY = A_TO_Z_ARRAY.map(item => "A"+item)
// ["AA", "AB", "AC", "AD", "AE", "AF", "AG", "AH", "AI", "AJ", "AK", "AL", "AM", "AN", "AO", "AP", "AQ", "AR", "AS", "AT", "AU", "AV", "AW", "AX", "AY", "AZ"]
/* 我的 excel 是从 A列 到 AJ列 */
// 从上面复制要的这一段
let otherColArr = ["AA", "AB", "AC", "AD", "AE", "AF", "AG", "AH", "AI", "AJ"]
// 把两端拼接起来，拿到列号集合
let myCol = A_TO_Z_ARRAY.concat(otherColArr)
// ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "AA", "AB", "AC", "AD", "AE", "AF", "AG", "AH", "AI", "AJ"]
JS 字典是无序的，所以顺序可能并不如你想的那样…
所以采用 JavaScript 中的 map 来存，可以达到有序
let obj = {}
myCol.forEach(item => obj[item] = "")
// {"A":"","AA":"","AB":"","AC":"","AD":"","AE":"","AF":"","AG":"","AH":"","AI":"","AJ":"","B":"","C":"","D":"","E":"","F":"","G":"","H":"","I":"","J":"","K":"","L":"","M":"","N":"","O":"","P":"","Q":"","R":"","S":"","T":"","U":"","V":"","W":"","X":"","Y":"","Z":""}
let myMap = new Map()
myCol.forEach(item => myMap.set(item, ""))
// {}
/*
[[Entries]]
0: {"A" => ""}
1: {"B" => ""}
2: {"C" => ""}
3: {"D" => ""}
4: {"E" => ""}
5: {"F" => ""}
6: {"G" => ""}
7: {"H" => ""}
8: {"I" => ""}
9: {"J" => ""}
10: {"K" => ""}
11: {"L" => ""}
12: {"M" => ""}
13: {"N" => ""}
14: {"O" => ""}
15: {"P" => ""}
16: {"Q" => ""}
17: {"R" => ""}
18: {"S" => ""}
19: {"T" => ""}
20: {"U" => ""}
21: {"V" => ""}
22: {"W" => ""}
23: {"X" => ""}
24: {"Y" => ""}
25: {"Z" => ""}
26: {"AA" => ""}
27: {"AB" => ""}
28: {"AC" => ""}
29: {"AD" => ""}
30: {"AE" => ""}
31: {"AF" => ""}
32: {"AG" => ""}
33: {"AH" => ""}
34: {"AI" => ""}
35: {"AJ" => ""}
*/
[...myMap.keys()]
// ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "AA", "AB", "AC", "AD", "AE", "AF", "AG", "AH", "AI", "AJ"]
[...myMap.values()]
// ["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""]
似乎有些麻烦了，填数据也没有很轻量直观的感觉，还是用对象+对照数组实现吧
- 数组有序，对象无序
let myCol = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "AA", "AB", "AC", "AD", "AE", "AF", "AG", "AH", "AI", "AJ"]
// 合并单元格，这一行就 A、AE 有值，其他的就不用写了，简短可维护的代码，达到了同样的效果
let obj = {
"A": "A单元格",
"AE": "AE单元格"
}
let header = myCol.map(item => obj[item] || "")
// ["A单元格", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "AE单元格", "", "", "", "", ""]
对比改版前后的代码，写个优化总结
需要注意重复的值（作为 key 不能重复，会导致列对不上）
在谷歌浏览器控制台里敲会有个数提示，可以进一步确保数据的正确性
扫一扫
2272
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
