u
This commit is contained in:
oneao committed
1 parent
2b76078a77
commit
a030d1c92e
5 files changed
+449
-168
No files matched your search
+149
-85
@@ -1,97 +1,161 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>可编辑表格示例</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
padding: 20px;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
}
|
||||
th, td {
|
||||
border: 1px solid #ccc;
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
input[type="text"], input[type="date"] {
|
||||
width: 90%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
input[type="checkbox"] {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
button {
|
||||
margin-top: 10px;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
</style>
|
||||
<meta charset="UTF-8">
|
||||
<title>日期选择 Picker Demo</title>
|
||||
<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
|
||||
<style>
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
padding: 20px;
|
||||
}
|
||||
.category-tabs {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.category-tab {
|
||||
padding: 6px 12px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.category-tab.active {
|
||||
background-color: #409eff;
|
||||
color: white;
|
||||
border-color: #409eff;
|
||||
}
|
||||
.shortcut-options {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.shortcut-option {
|
||||
padding: 6px 12px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.shortcut-option.active {
|
||||
background-color: #67c23a;
|
||||
color: white;
|
||||
border-color: #67c23a;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<h2>日期选择器 Demo</h2>
|
||||
|
||||
<!-- 分类标签 -->
|
||||
<div class="category-tabs">
|
||||
<div
|
||||
v-for="cat in categories"
|
||||
:key="cat"
|
||||
class="category-tab"
|
||||
:class="{ active: selectedCategory === cat }"
|
||||
@click="selectCategory(cat)"
|
||||
>
|
||||
{{ cat }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 日期选择器 -->
|
||||
<el-date-picker
|
||||
v-model="dateValue"
|
||||
:type="pickerType"
|
||||
placeholder="请选择日期"
|
||||
:value-format="valueFormat"
|
||||
style="width: 100%;"
|
||||
></el-date-picker>
|
||||
|
||||
<h2>可编辑表格示例</h2>
|
||||
<!-- 快捷选项 -->
|
||||
<div class="shortcut-options">
|
||||
<div
|
||||
v-for="item in shortcuts"
|
||||
:key="item.label"
|
||||
class="shortcut-option"
|
||||
:class="{ active: activeShortcut === item.label }"
|
||||
@click="applyShortcut(item)"
|
||||
>
|
||||
{{ item.label }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table id="editableTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<!-- 生成 20 个列标题 -->
|
||||
<script>
|
||||
for(let i=1; i<=20; i++){
|
||||
document.write(`<th>列${i}</th>`);
|
||||
}
|
||||
</script>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- 初始 20 行 -->
|
||||
<script>
|
||||
function createRow(rowIndex){
|
||||
let row = '<tr>';
|
||||
for(let i=1;i<=20;i++){
|
||||
if(i % 3 === 1){ // 文本输入
|
||||
row += `<td><input type="text" placeholder="文本${rowIndex}-${i}"></td>`;
|
||||
} else if(i % 3 === 2){ // 日期选择
|
||||
row += `<td><input type="date"></td>`;
|
||||
} else { // 复选框
|
||||
row += `<td><input type="checkbox"></td>`;
|
||||
<div style="margin-top: 20px;">
|
||||
<strong>选择的值:</strong> {{ dateValue }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
||||
<script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
|
||||
<script>
|
||||
const { createApp, ref } = Vue
|
||||
const { ElDatePicker } = ElementPlus
|
||||
|
||||
createApp({
|
||||
setup() {
|
||||
const categories = ['日', '月', '年', '时间', '日期', '范围', '不限']
|
||||
const selectedCategory = ref('日')
|
||||
const dateValue = ref(null)
|
||||
const activeShortcut = ref(null)
|
||||
|
||||
const shortcuts = [
|
||||
{ label: '今天', getValue: () => new Date() },
|
||||
{ label: '本月', getValue: () => {
|
||||
const now = new Date()
|
||||
return [new Date(now.getFullYear(), now.getMonth(), 1), new Date(now.getFullYear(), now.getMonth() + 1, 0)]
|
||||
}},
|
||||
{ label: '本年', getValue: () => {
|
||||
const now = new Date()
|
||||
return [new Date(now.getFullYear(), 0, 1), new Date(now.getFullYear(), 11, 31)]
|
||||
}},
|
||||
]
|
||||
|
||||
const pickerType = Vue.computed(() => {
|
||||
switch(selectedCategory.value){
|
||||
case '日': return 'date'
|
||||
case '月': return 'month'
|
||||
case '年': return 'year'
|
||||
case '时间': return 'time'
|
||||
case '日期': return 'date'
|
||||
case '范围': return 'daterange'
|
||||
case '不限': return 'date'
|
||||
default: return 'date'
|
||||
}
|
||||
})
|
||||
|
||||
const valueFormat = Vue.computed(() => {
|
||||
switch(selectedCategory.value){
|
||||
case '日': return 'yyyy-MM-dd'
|
||||
case '月': return 'yyyy-MM'
|
||||
case '年': return 'yyyy'
|
||||
case '时间': return 'HH:mm:ss'
|
||||
case '日期': return 'yyyy-MM-dd'
|
||||
case '范围': return 'yyyy-MM-dd'
|
||||
case '不限': return 'yyyy-MM-dd'
|
||||
default: return 'yyyy-MM-dd'
|
||||
}
|
||||
})
|
||||
|
||||
function selectCategory(cat) {
|
||||
selectedCategory.value = cat
|
||||
dateValue.value = null
|
||||
activeShortcut.value = null
|
||||
}
|
||||
row += '</tr>';
|
||||
return row;
|
||||
|
||||
function applyShortcut(item) {
|
||||
activeShortcut.value = item.label
|
||||
dateValue.value = item.getValue()
|
||||
}
|
||||
|
||||
return { categories, selectedCategory, dateValue, pickerType, valueFormat, shortcuts, activeShortcut, selectCategory, applyShortcut }
|
||||
}
|
||||
|
||||
for(let r=1;r<=20;r++){
|
||||
document.write(createRow(r));
|
||||
}
|
||||
</script>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<button onclick="addRow()">新增行</button>
|
||||
|
||||
<script>
|
||||
function addRow(){
|
||||
const tbody = document.querySelector('#editableTable tbody');
|
||||
const rowCount = tbody.rows.length + 1;
|
||||
let newRow = '<tr>';
|
||||
for(let i=1;i<=20;i++){
|
||||
if(i % 3 === 1){
|
||||
newRow += `<td><input type="text" placeholder="文本${rowCount}-${i}"></td>`;
|
||||
} else if(i % 3 === 2){
|
||||
newRow += `<td><input type="date"></td>`;
|
||||
} else {
|
||||
newRow += `<td><input type="checkbox"></td>`;
|
||||
}
|
||||
}
|
||||
newRow += '</tr>';
|
||||
tbody.insertAdjacentHTML('beforeend', newRow);
|
||||
}
|
||||
</script>
|
||||
|
||||
}).use(ElementPlus).mount('#app')
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user