elementUI版系统更新日志

最新推荐文章于 2024-11-15 10:59:37 发布

qq_45888119

最新推荐文章于 2024-11-15 10:59:37 发布

阅读量552

点赞数 4

CC 4.0 BY-SA版权

文章标签： elementui vue.js javascript

本文链接：https://blog.youkuaiyun.com/qq_45888119/article/details/136834719

博客展示了使用ElementUI和Vue.js实现的最终效果，包含新增、查询页面以及新增窗口，还有可编辑表格，体现了JavaScript在前端页面交互中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最终效果：

新增

查询页面：

<template>
<div class="app-container">
  <el-row>
    <el-col :span="12">
      <el-card>
        <el-statistic
          :value="updateNum"
          title="更新次数"
        ></el-statistic>
      </el-card>
    </el-col>
    <el-col :span="12">
      <el-card>
        <el-statistic
          :value="problemNum"
          title="解决问题数量"
        ></el-statistic>
      </el-card>
    </el-col>
  </el-row>
  <el-row :gutter="10" style="margin-top: 30px;height: 100%">
    <el-col :span="1.5">
      <el-button
        type="primary"
        plain
        :icon="IconEnum.ADD"
        size="mini"
        @click="handleAdd"
      >新增</el-button>
    </el-col>
  </el-row>
  <el-card style="margin-top: 30px;height: 100%">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
      <el-form-item label="版本号">
        <el-input v-model="queryParams.versionNo"
                  placeholder="请输入版本号"
                  clearable
                  @keyup.enter.native="searchQuery"></el-input>
      </el-form-item>
      <el-form-item label="发布时间">
        <el-date-picker
          v-model="queryParams.updateDateList"
          style="width: 240px"
          format="yyyy-MM-dd"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" :icon="IconEnum.SEARCH" size="mini" @click="searchQuery">搜索</el-button>
        <el-button :icon="IconEnum.RESET" size="mini" @click="resetQuery('queryForm')">重置</el-button>
      </el-form-item>
    </el-form>
    <div style="overflow:auto">
      <el-timeline>
        <el-timeline-item  v-for="(item, index) in dataSource" :key="index" :timestamp="item.updateDate" placement="top">
            <div :class="isExpanded[index]?'extendCard':'hiddenCard'">
              <div>
                <el-button plain :icon="IconEnum.EDIT" type="warning" size="mini"
                           @click="handleEdit(item.id)">编辑</el-button>
                <el-button type="danger" plain :icon="IconEnum.DELETE" size="mini" @click="handleDelete(item)"
                >删除</el-button>
                <el-button style="float: right" size="mini" v-if="!isExpanded[index]" @click="expandCard(index)">展开</el-button>
                <el-button style="float: right" size="mini" v-else @click="collapseCard(index)">收起</el-button>
              </div>
              <span style="display: inline;font-weight: bold;font-size: large;line-height: 40px;">版本号：{
  
  {item.versionNo}}</span>
              <div v-for="content in item.sysVersionItemDtoList">
                <span style="font-weight:bold">【{
  
  {content.modelName}}】</span>
<!--                <div v-for="problem in content.problemList">-->
                  <div v-html="content.problem.replace(/\n/g, '<br>')"><