<template>
<div class="container">
<!
-- 卡片区域
-->
<div class="card">
<div class="card
-header">学习计划表</div>
<div class="card
-body">
<form @submit
.prevent="add">
<div class="row g
-4">
<!
-- 学习科目
-->
<div class="col
-auto">
<div class="input
-group mb
-3">
<span class="input
-group-text">学习科目</span>
<input
type="text"
class="form
-control"
placeholder="请输入学习科目"
v
-model
.trim="subject"
/>
</div>
</div>
<!
-- 学习内容
-->
<div class="col
-auto">
<div class="input
-group mb
-3">
<span class="input
-group-text">学习内容</span>
<textarea
class="form
-control"
v
-model
.trim="content"
placeholder="请输入学习内容"
:style="{ height: '38px' }"
></textarea>
</div>
</div>
<!
-- 学习地点
-->
<div class="col
-auto">
<div class="input
-group mb
-3">
<span class="input
-group-text">学习地点</span>
<select class="form
-select form
-select
-sm" v
-model="selectedOption">
<option
v
-for="option in options"
:value="option
.place"
:key="option
.placeCode"
>
{{ option
.place }}
</option>
</select>
</div>
</div>
<!
-- 添加按钮
-->
<div class="col
-auto">
<button type="submit" class="btn btn
-primary">添加</button>
</div>
</div>
</form>
</div>
</div>
<!
-- 表格区域
-->
<table class="table table
-striped table
-hover table
-bordered">
<thead>
<tr>
<th scope="col">
序号</th>
<th scope="col">学习科目</th>
<th scope="col">学习内容</th>
<th scope="col">学习地点</th>
<th scope="col">完成状态</th>
<th scope="col">操作</th>
</tr>
</thead>
<tbody>
<tr v
-for="item in
list" :key="item
.id">
<td>{{ item
.id }}</td>
<td>{{ item
.subject }}</td>
<td>{{ item
.content }}</td>
<td>{{ item
.place }}</td>
<td>
<div class="form
-check form
-switch">
<input
class="form
-check
-input"
type="checkbox"
role="switch"
:id="'cb' + item
.id"
v
-model="item
.status"
/>
<label
class="form
-check
-label"
:for="'cb' + item
.id"
v
-if="item
.status"
>
已完成
</label>
<label
class="form
-check
-label"
:for="'cb' + item
.id"
v
-else
>
未完成
</label>
</div>
</td>
<td>
<a href="javascript:;" @click="remove(item
.id, item
.status)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script setup>
import { ref, reactive } from 'vue'
// 表格数据
const
list = ref([
{
id: '1',
subject: 'Vue
.js 前端实战开发',
content: '学习指令，例如 v
-if、v
-for、v
-model 等',
place: '自习室',
status: false,
},
])
// 表单数据
let subject = ref('')
let content = ref('')
let nextId = ref('')
let selectedOption = ref('自习室')
let options = reactive([
{ placeCode: 0, place: '自习室' },
{ placeCode: 1, place: '图书馆' },
{ placeCode: 2, place: '宿舍' },
])
// 添加学习计划
let add = () => {
if (subject
.value === '') {
alert('学习科目为必填项！')
return
}
// 计算下一个ID
if (
list.value
.length > 0) {
nextId
.value = Math
.max(
...list.value
.map(item => parseInt(item
.id))) + 1
} else {
nextId
.value = 1
}
const obj = {
id: nextId
.value
.toString(),
subject: subject
.value,
content: content
.value,
place: selectedOption
.value,
status: false,
}
list.value
.push(obj)
// 重置表单
subject
.value = ''
content
.value = ''
selectedOption
.value = '自习室'
}
// 删除学习计划
let remove = (id, status) => {
if (status) {
list.value =
list.value
.filter(item => item
.id !== id)
} else {
alert('请完成该学习计划后再进行删除操作！')
}
}
</script>
<style scoped>
.container {
max
-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.card {
width: 100%;
border: 1px solid #999;
margin
-bottom: 20px;
border
-radius: 8px;
overflow: hidden;
}
.card
-header {
width: 100%;
height: 50px;
background
-color: aliceblue;
line
-height: 50px;
font
-size: 24px;
font
-weight: 700;
text
-indent: 30px;
border
-bottom: 1px solid #999;
}
.card
-body {
width: 100%;
padding: 20px;
}
.row {
display: flex;
flex
-wrap: wrap;
align
-items: center;
gap: 15px;
}
.col
-auto {
flex: 1;
min
-width: 200px;
}
.input
-group {
display: flex;
align
-items: center;
}
.input
-group-text {
background
-color: #f8f9fa;
border: 1px solid #ced4da;
border
-right: none;
padding: 6px 12px;
font
-weight: 500;
}
.form
-control,
.form
-select {
flex: 1;
border: 1px solid #ced4da;
padding: 6px 12px;
border
-radius: 0 4px 4px 0;
}
.btn
-primary {
background
-color: #007bff;
border
-color: #007bff;
padding: 6px 20px;
}
.btn
-primary:hover {
background
-color: #0056b3;
border
-color: #0056b3;
}
/* 表格样式 */
.table {
width: 100%;
border
-collapse: collapse;
margin
-top: 20px;
}
.table th,
.table td {
padding: 12px;
text
-align: center;
vertical
-align: middle;
border: 1px solid #dee2e6;
}
.table th {
background
-color: #f8f9fa;
font
-weight: 600;
}
.table
-striped tbody tr:nth
-of
-type(odd) {
background
-color: rgba(0, 0, 0, 0
.02);
}
.table
-hover tbody tr:hover {
background
-color: rgba(0, 0, 0, 0
.075);
}
/* 开关样式 */
.form
-check
.form
-switch {
display: flex;
align
-items: center;
justify
-content: center;
gap: 8px;
}
.form
-check
-input {
width: 3em;
height: 1
.5em;
}
.form
-check
-label {
margin: 0;
cursor: pointer;
}
/* 删除链接样式 */
a {
color: #dc3545;
text
-decoration: none;
font
-weight: 500;
}
a:hover {
color: #c82333;
text
-decoration: underline;
}
/* 响应式设计 */
@media (max
-width: 768px) {
.container {
padding: 10px;
}
.row {
flex
-direction: column;
}
.col
-auto {
min
-width: 100%;
}
.table {
font
-size: 14px;
}
.table th,
.table td {
padding: 8px 4px;
}
}
</style>
有问题没
本文介绍如何在Bootstrap中恢复带有数字序号的有序列表样式。通过调整CSS属性，使list-group内的列表项显示正确的序号，并提供示例代码。
扫一扫
1282
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
