2024年5月27日第五十六篇

标签：el 27 const color value 2024 student 第五十六 ref

今天做了一个网页开发，联系了自己的增删改查，和弹出式表单的设计。

<template>
  <el-container class="layout-container-demo">
    <el-aside width="200px">
      <el-scrollbar>
        <el-menu :default-openeds="['1', '3']">
          <el-sub-menu index="1">
            <template #title>
             
            </template>
            <el-menu-item-group>
              <template #title>Group 1</template>
              <el-menu-item  index="1-1">学生信息管理</el-menu-item>
             
            </el-menu-item-group>
          </el-sub-menu>
        </el-menu>
      </el-scrollbar>
    </el-aside>

    <el-container>
      <el-header style="text-align: center; font-size: 12px;"> 
        <h1 class="text-black-blue font-bold font-large" style="display: inline-block; vertical-align: middle;">学生信息管理系统</h1>

    

      </el-header>
      <br>
      <div>
    <el-button type="primary" size="small" @click="openDialog">
      打开表单
    </el-button>
    <el-dialog
      title="填写表单"
      :visible="dialogVisible"
      @close="closeDialog"
    >
      <el-form :model="form">
        <el-form-item label="名字" :label-width="formLabelWidth">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input v-model="form.email"></el-input>
        </el-form-item>
      </el-form>
      <template v-slot:footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog">取消</el-button>
          <el-button type="primary" @click="submitForm">提交</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
      <!-- <div class="toolbar" style="display: flex; gap: 10px;">
    <div>
      政策名称<el-input style="width: 200px" placeholder="请输入政策名称" v-model="name" />
    </div>
    <div>
      发文字号<el-input style="width: 200px" placeholder="请输入发文字号" v-model="document" />
    </div>
    <div>
      发文机构<el-input style="width: 200px" placeholder="请输入发文机构" v-model="organ" />
    </div>
    <div>
      全文检索<el-input style="width: 200px" placeholder="" v-model="content" />
    </div>
    <div>
      <el-button type="primary" @click="search">搜索</el-button>
    </div>
  </div> -->
  <div>
    <el-table :data="currentPageData" style="width: 100%">
    <el-table-column label="学号" prop="snum" />
    <el-table-column label="姓名" prop="name" />
    <el-table-column label="性别" prop="gender" />
    <el-table-column label="出生日期" prop="birthday" />
    <el-table-column label="操作">
      <template v-slot="scope">
        <el-button 
          size="small" 
          type="primary" 
          @click="handleEdit(scope.row)">编辑</el-button>
        <el-button 
          size="small" 
          type="danger" 
          @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
<div style="display: flex; justify-content: center;">
  <el-pagination
    background
    layout="prev, pager, next"
    :total="total"
    :current-page="currentPage"
    @current-change="handleCurrentChange"
    :page-size="pageSize"
  />
</div>

</div>
    </el-container>
  </el-container>
</template>
<script setup>
import {  onMounted,computed, ref} from 'vue'
import { api } from '@/api/apis'
import { ElMessage } from 'element-plus';
import { ElMessageBox } from 'element-plus'

const dialogVisible = ref(false)

const handleClose = (done) => {
  ElMessageBox.confirm('Are you sure to close this dialog?')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}
const currentPageData = ref([]);
const currentPage = ref(1); 
const pageSize = ref(10); 
const total = ref(0); 
let drawerData =ref('')
let studentdata =ref('')
const handleCurrentChange = (newPage) => {
  // 根据新的页码更新当前页的数据
  currentPage.value = newPage;
  const startIndex = (newPage - 1) * pageSize.value;
  currentPageData.value = student.value.slice(startIndex, startIndex + pageSize.value);
}

function openDialog() {
      dialogVisible = true;
    }
function closeDialog() {
      this.dialogVisible = false;
    },
    submitForm() {
      // 提交表单的逻辑
      console.log('Form submitted:', this.form);
      this.dialogVisible = false;
    }
  }
function showDrawer(row) {
       drawerData = row; // 更新当前行的数据
      this.drawer = true; // 打开 el-drawer
    }
function handleEdit(row) {
      console.log('Edit:', row);
      // Add your edit logic here
    }
function handleDelete(row){
  console.log('Delete:', row);
  studentdata=row;
  console.log('Delete:', studentdata);
  api.studentApi.delete(studentdata).then((res) => {
    ElMessage.success('删除成功');
    fetchSystemList();
  })
}
onMounted(() => { 
  fetchSystemList();
 
});

function fetchSystemList() {
    api.studentApi.get().then((res) => {
      student.value = res.data
      currentPageData.value = student.value.slice(0, pageSize.value);
      total.value = student.value.length;
    })
  }
const drawer = ref(false)
  const student=ref([])

const name=ref('')
const document=ref('')
const organ=ref('')
const content=ref('')
function search(){
  api.studentApi.search(name.value,document.value,organ.value,content.value).then((res) => {
    student.value = res.data;
    currentPageData.value = student.value.slice(0, pageSize.value);
      total.value = student.value.length;
  })
}

</script>

<style scoped>
.button-container {
  display: flex;
  justify-content: center; /* 水平居中 */
}

.layout-container-demo {
  width: 100%;
}
.layout-container-demo .el-header {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}
.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  background: var(--el-color-primary-light-8);
}
.layout-container-demo .el-menu {
  border-right: none;
}
.layout-container-demo .el-main {
  padding: 0;
}
.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
.text-center {
  text-align: center;
}

.text-black-blue {
  color: #0000FF; /* 黑蓝色 */
}

.font-bold {
  font-weight: bold; /* 加粗 */
}

.font-large {
  font-size: 36px;
}
.el-drawer__wrapper.custom-modal {
  background-color: rgba(0, 0, 0, 0.5) !important;
}


</style>

 

<template>   <el-container class="layout-container-demo">     <el-aside width="200px">       <el-scrollbar>         <el-menu :default-openeds="['1', '3']">           <el-sub-menu index="1">             <template #title>                           </template>             <el-menu-item-group>               <template #title>Group 1</template>               <el-menu-item  index="1-1">学生信息管理</el-menu-item>                           </el-menu-item-group>           </el-sub-menu>         </el-menu>       </el-scrollbar>     </el-aside>
    <el-container>       <el-header style="text-align: center; font-size: 12px;">         <h1 class="text-black-blue font-bold font-large" style="display: inline-block; vertical-align: middle;">学生信息管理系统</h1>
   
      </el-header>       <br>       <div>     <el-button type="primary" size="small" @click="openDialog">       打开表单     </el-button>     <el-dialog       title="填写表单"       :visible="dialogVisible"       @close="closeDialog"     >       <el-form :model="form">         <el-form-item label="名字" :label-width="formLabelWidth">           <el-input v-model="form.name"></el-input>         </el-form-item>         <el-form-item label="邮箱" :label-width="formLabelWidth">           <el-input v-model="form.email"></el-input>         </el-form-item>       </el-form>       <template v-slot:footer>         <span class="dialog-footer">           <el-button @click="closeDialog">取消</el-button>           <el-button type="primary" @click="submitForm">提交</el-button>         </span>       </template>     </el-dialog>   </div>       <!-- <div class="toolbar" style="display: flex; gap: 10px;">     <div>       政策名称<el-input style="width: 200px" placeholder="请输入政策名称" v-model="name" />     </div>     <div>       发文字号<el-input style="width: 200px" placeholder="请输入发文字号" v-model="document" />     </div>     <div>       发文机构<el-input style="width: 200px" placeholder="请输入发文机构" v-model="organ" />     </div>     <div>       全文检索<el-input style="width: 200px" placeholder="" v-model="content" />     </div>     <div>       <el-button type="primary" @click="search">搜索</el-button>     </div>   </div> -->   <div>     <el-table :data="currentPageData" style="width: 100%">     <el-table-column label="学号" prop="snum" />     <el-table-column label="姓名" prop="name" />     <el-table-column label="性别" prop="gender" />     <el-table-column label="出生日期" prop="birthday" />     <el-table-column label="操作">       <template v-slot="scope">         <el-button           size="small"           type="primary"           @click="handleEdit(scope.row)">编辑</el-button>         <el-button           size="small"           type="danger"           @click="handleDelete(scope.row)">删除</el-button>       </template>     </el-table-column>   </el-table> <div style="display: flex; justify-content: center;">   <el-pagination     background     layout="prev, pager, next"     :total="total"     :current-page="currentPage"     @current-change="handleCurrentChange"     :page-size="pageSize"   /> </div>
</div>     </el-container>   </el-container> </template> <script setup> import {  onMounted,computed, ref} from 'vue' import { api } from '@/api/apis' import { ElMessage } from 'element-plus'; import { ElMessageBox } from 'element-plus'
const dialogVisible = ref(false)
const handleClose = (done) => {   ElMessageBox.confirm('Are you sure to close this dialog?')     .then(() => {       done()     })     .catch(() => {       // catch error     }) } const currentPageData = ref([]); const currentPage = ref(1); const pageSize = ref(10); const total = ref(0); let drawerData =ref('') let studentdata =ref('') const handleCurrentChange = (newPage) => {   // 根据新的页码更新当前页的数据   currentPage.value = newPage;   const startIndex = (newPage - 1) * pageSize.value;   currentPageData.value = student.value.slice(startIndex, startIndex + pageSize.value); }
function openDialog() {       dialogVisible = true;     } function closeDialog() {       this.dialogVisible = false;     },     submitForm() {       // 提交表单的逻辑       console.log('Form submitted:', this.form);       this.dialogVisible = false;     }   } function showDrawer(row) {        drawerData = row; // 更新当前行的数据       this.drawer = true; // 打开 el-drawer     } function handleEdit(row) {       console.log('Edit:', row);       // Add your edit logic here     } function handleDelete(row){   console.log('Delete:', row);   studentdata=row;   console.log('Delete:', studentdata);   api.studentApi.delete(studentdata).then((res) => {     ElMessage.success('删除成功');     fetchSystemList();   }) } onMounted(() => {   fetchSystemList();   });
function fetchSystemList() {     api.studentApi.get().then((res) => {       student.value = res.data       currentPageData.value = student.value.slice(0, pageSize.value);       total.value = student.value.length;     })   } const drawer = ref(false)   const student=ref([])
const name=ref('') const document=ref('') const organ=ref('') const content=ref('') function search(){   api.studentApi.search(name.value,document.value,organ.value,content.value).then((res) => {     student.value = res.data;     currentPageData.value = student.value.slice(0, pageSize.value);       total.value = student.value.length;   }) }
</script>
<style scoped> .button-container {   display: flex;   justify-content: center; /* 水平居中 */ }
.layout-container-demo {   width: 100%; } .layout-container-demo .el-header {   position: relative;   background-color: var(--el-color-primary-light-7);   color: var(--el-text-color-primary); } .layout-container-demo .el-aside {   color: var(--el-text-color-primary);   background: var(--el-color-primary-light-8); } .layout-container-demo .el-menu {   border-right: none; } .layout-container-demo .el-main {   padding: 0; } .layout-container-demo .toolbar {   display: inline-flex;   align-items: center;   justify-content: center;   height: 100%;   right: 20px; } .text-center {   text-align: center; }
.text-black-blue {   color: #0000FF; /* 黑蓝色 */ }
.font-bold {   font-weight: bold; /* 加粗 */ }
.font-large {   font-size: 36px; } .el-drawer__wrapper.custom-modal {   background-color: rgba(0, 0, 0, 0.5) !important; }

</style>

标签：el,27,const,color,value,2024,student,第五十六,ref
From： https://www.cnblogs.com/xuechenhao173/p/18216705