vue3+ts+element表单基础使用和分页组组件

这篇文章展示了如何在Vue应用中使用ElementPlus库创建响应式的表单,包括名称、学科和年级的输入字段,以及查询和重置功能。同时,它还涉及到动态表格的实现,包括自定义列和分页功能,实现了数据的筛选和展示。

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

<template>
  <div class="mysearch">
    <el-form :model="formData" label-width="80px" ref="myform">
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="名称" prop="name">
            <el-input v-model="formData.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="学科" prop="subject">
            <el-input v-model="formData.subject"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="年级" prop="grade">
            <el-select v-model="formData.grade" placeholder="请选择">
              <el-option label="一年级" value="shanghai"></el-option>
              <el-option label="二年级" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="2" :offset="19">
          <el-button type="primary" size="medium" @click="submitForm">
            查 询
          </el-button>
        </el-col>
        <el-col :span="2" :offset="0">
          <el-button type="primary" size="medium" @click="submitReset">
            重 置
          </el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<style scoped lang="less">
.mysearch {
  padding: 20px;
}
</style>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import type { ElForm } from 'element-plus'
const myform = ref<InstanceType<typeof ElForm>>()
const formData = reactive({
  name: '',
  subject: '',
  grade: ''
})
// 查找
const submitForm = () => {
  const { name, subject, grade } = formData
  console.log(name, subject, grade)
}
// 重置
const submitReset = () => {
  myform.value?.resetFields()
}
</script>


挖坑点

Element Plus的官网Demo的代码里面没有写prop,为了实现数据的响应式,在写的时候需要自己绑定

  <el-form-item label="Activity name">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
  • 使用el-form的ref需要引入ElForm

import { ElForm } from 'element-plus'

const myform = ref<InstanceType<typeof ElForm>>()

  • 在components文件下新建CommonTable/CommonTable.vue文件

<template>
  <div class="table">
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      max-height="300"
      v-loading="loading"
      @selection-change="selectionChange"
    >
      <el-table-column type="selection" width="50" />
      <template v-for="(item, index) in tableHeader">
        <!-- 插槽:标题文字要特殊显示 | 操作 -->
        <el-table-column
          v-if="item.slot"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :fixed="item.fixed"
          :align="item.align || 'center'"
          :show-overflow-tooltip="item.overHidden || false"
          :min-width="item.minWidth || '100px'"
          :sortable="item.sortable || false"
          :type="item.type"
          :width="item.width"
        >
          <slot :name="item.slot"></slot>
        </el-table-column>
        <!-- 文字不需要特殊显示 -->
        <el-table-column
          v-else
          :key="index + 1"
          :prop="item.prop"
          :label="item.label"
          :fixed="item.fixed"
          :align="item.align || 'center'"
          :show-overflow-tooltip="item.overHidden || false"
          :min-width="item.minWidth || '100px'"
          :sortable="item.sortable || false"
          :type="item.type"
          :width="item.width"
        >
          <template #default="scope">
            <span>{{ scope.row[item.prop] ? scope.row[item.prop] : "" }}</span>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <!-- 分页 -->
    <el-pagination 
    :locale="locale"
      background
      class="pagination"
      small
      :page-sizes="pageSizesArr"
      @size-change="sizeChange"
      @current-change="currentChange"
      :current-page="current"
      :page-size="size"
      :total="total"
      :layout="layout"
    />
  </div>
</template>
    
<script setup lang='ts'>
import { defineProps, defineEmits, onMounted, reactive, ref } from "vue";
 
 
const emits = defineEmits(["selectionChange", "sizeChange", "currentChange"]);
const props = defineProps({
  // 表格显示的数据
  tableData: {
    type: String,
    // default: function () {
    //   return [];
    // },
  },
  // 表头数据
  tableHeader: {
    type: String,
    default: function () {
      return [];
    },
  },
  // 总页数
  total: {
    type: Number,
    // 类型
    required: true,
    default: 0,
  },
  // 分页的页容量数组
  pageSizesArr: {
    type: Array,
    default() {
      return [10, 20, 30, 50];
    },
  },
  // 分页的布局
  layout: {
    type: String,
    default: "total, sizes, prev, pager, next, jumper",
  },
});
//表格事件
const selectionChange = (val) => {
  emits("selectionChange", val);
};
 
// 页数改变的时候触发的事件
const sizeChange = (val) => {
  emits("sizeChange", val);
};
// 当前页改变的时候触发的事件
const currentChange = (val) => {
  emits("currentChange", val);
};
</script>
    
<style lang="less" scoped>
.table {
  margin-top: 1rem;
}
.pagination {
  float: right;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}
</style>
  • 组件中使用

<template>
  <el-card class="main-card">
    <!-- 表格展示 -->
    <CommonTable
      :tableData="tableData"
      :tableHeader="tableHeader"
      :isOperate="isOperate"
      :total="total"
      :operateWidth="operateWidth"
      @handleSizeChange="sizeChange"
      @handleCurrentChange="currentChange"
    >
    <template v-slot:isReview>
          <el-tag v-if="isReview == 0" type="warning">审核中</el-tag>
          <el-tag v-if="isReview == 1" type="success">正常</el-tag>
    </template>
    <template v-slot:state>
        <el-tag v-if="state == 1">文章</el-tag>
          <el-tag v-if="state == 2" type="danger">留言</el-tag>
          <el-tag v-if="state == 3" type="success">关于我</el-tag>
          <el-tag v-if="state == 4" type="warning">友链</el-tag>
          <el-tag v-if="state == 5" type="warning">说说</el-tag>
    </template>
    <template v-slot:action>
          <el-button
            v-if="action == 0"
            size="mini"
            type="success"
            @click="updateCommentReview(scope.row.id)">
            通过
          </el-button>
          <el-popconfirm style="margin-left: 10px" title="确定删除吗?" @confirm="deleteComments(scope.row.id)">
            <el-button size="mini" type="danger"> 删除 </el-button>
          </el-popconfirm>
        </template>
    </CommonTable>
  </el-card>
</template>
    
<script setup lang='ts'>
import { reactive, ref, onMounted, computed } from "vue-demi";
import CommonTable from "../../components/Table/CommonTable.vue";
// import { defineStore } from "pinia";
// const store = defineStore();
// 表格所需的数据
const tableData = reactive([
  {
    avatar: "头像",
    nickname: "评论人",
    replyNickname: "回复人",
    articleTitle: "文章标题",
    commentContent: "评论内容",
    createTime: "评论时间",
    isReview: "状态",
  },
]);
//表头数据  辅助tableData的数据 tableData是自己定义
const tableHeader = reactive([
  {
    prop: "avatar",
    fixed: "left",
    label: "头像",
    width: "130px",
    align: "center", // 对齐方式
  },
  {
    prop: "nickname",
    label: "评论人",
    width: "130px",
    align: "center", // 对齐方式
  },
  {
    prop: "replyNickname",
    label: "回复人",
    width: "130px",
    align: "left", // 对齐方式
  },
  {
    prop: "articleTitle",
    label: "文章标题",
    width: "130px",
    align: "left", // 对齐方式
  },
  {
    prop: "commentContent",
    label: "评论内容",
    width: "130px",
    align: "left", // 对齐方式
  },
  {
    prop: "createTime",
    label: "评论时间",
    width: "130px",
    align: "left", // 对齐方式
  },
  {
    prop: "isReview", //prop
    label: "状态", //label
    slot: "isReview", //插槽根据需求显示
    width: "130px", //宽度
    align: "left", // 对齐方式
    fixed:''//固定左侧或右侧?true/flase
  },
  {
    label: "来源",
    slot: "state",
    width: "130px",
    align: "left", // 对齐方式
  },
  {
    label: "操作",
    slot: "action",
    fixed: "right",
    width: "130px",
    align: "center", // 对齐方式
  },
]);
 
const operateWidth = ref(160); // 操作列宽度
const isOperate = ref(true); // 操作列是否显示
const pageSize = ref(10); // 每页显示条数
const pageNum = ref(2); // 当前页码
const total = ref(100); // 总条数
const isReview=ref(0);
const state=ref(1);
const action=ref(0)
// const isReview=ref(null);
// 分页改变事件
const sizeChange = (val) => {
  pageSize.value = val;
 
};
// 当前页改变事件
const currentChange = (val) => {
  pageNum.value = val;
 
};
</script>
 
 
    
<style lang="less" scoped>
.article-status-menu {
  font-size: 14px;
  margin-top: 16px;
  color: #999;
}
.table {
  margin-top: 10px;
  .option-box {
    margin-top: 1.5rem;
    .el-select {
      margin-right: 1.5rem;
    }
    .search {
      margin-top: 0.5rem;
    }
  }
  .operation-container {
    display: flex;
    align-items: center;
    // margin-bottom: 1.25rem;
    // margin-top: 1.25rem;
  }
}
.el-table {
  margin-top: 1rem;
}
</style>
    
### 回答1: Vue3 TS Axios Route Element Plus 可二次开发的模板,是一款帮助开发人员更快速、高效地完成项目搭建的工具。它集成了Vue3、TypeScript、Axios、Vue Router、Element Plus等主流技术,采用优雅的代码风格完美封装的方式,让开发工作更加轻松愉快。 这个模板具有强大的请求功能,可以轻松实现请求的拦截、响应统一处理等,大大提高了开发效率。具体的请求使用方法可以参考官方文档,使用简单,易于上手。 此外,这个模板还采用了Vue Router路由管理,能够实现页面间的无缝切换、动态路由绑定等功能,为项目的前端路由管理提供了很好的支持。 另外,Element Plus UI组件库的集成,让开发人员可以使用丰富多彩、易于定制的UI组件,从而更加轻松快捷地完成页面的搭建工作。 总的来说,Vue3 TS Axios Route Element Plus 可二次开发的模板是一款非常优秀的工具,它的使用可以大大提高开发效率,让开发工作更加轻松、快捷。如果你正在寻找一款高效、易用、可定制化的项目模板,那么这个模板将会是一个非常不错的选择。 ### 回答2: Vue3 TS Axios Route Element Plus 可二次开发的模板是一个非常好用的前端模板,它包含了一系列完美封装的工具组件,让前端开发变得更加快捷高效。 对于请求的使用方法,模板采用了 axios 进行请求的发送拦截,可以通过在相关文件中配置 baseURL、headers、timeout 等信息来进行设置。同时,针对不同的请求接口,模板提供了多种不同的请求类别,包括 GET、POST、PUT、DELETE 等,使用起来非常灵活方便。 在封装方面,模板对 Element Plus 组件库进行了二次封装,让组件使用更加简便。同时,对于一些常见的业务组件,模板也进行了封装,例如表格组件表单组件分页组件等,可以基本满足大多数前端开发的需求。 总体而言,Vue3 TS Axios Route Element Plus 可二次开发的模板非常适合中小型项目的快速开发,同时也具备较高的可定制性扩展性,非常推荐大家去尝试使用。 ### 回答3Vue3 TS Axios Route Element Plus 可二次开发的模板是一个非常有用的工具,它可以帮助开发者快速搭建一个高效、可靠的Vue3项目。该模板包括了请求使用方法、完美封装,可以满足绝大部分前端项目的需求。 首先,该模板使用Vue3作为前端框架,集成了TypeScript类型检查工具,可以提升开发效率代码质量。Axios作为HTTP请求库,是一个非常常用的工具,可以轻松地处理前端的数据请求。而Route则是Vue3中的路由管理工具,提供路由拦截、跳转等多种功能,便于前端项目的开发。 此外,该模板还集成了Element Plus作为UI框架,可支持更丰富的UI组件,提供多样化的视觉效果交互视频。使用Element Plus可以使得开发者在UI设计上节省大量时间,让开发工作更加高效。 最重要的是,该模板为以上工具进行了二次开发,使其更加适合前端项目的需求。在对数据请求的封装上,该模板采用了Promise的设计模式,可以方便地进行链式调用,提升代码的可读性。同时,该模板还支持多种请求方式,例如GET、POST等,可以赋予前端更多的开发空间。 总的来说,Vue3 TS Axios Route Element Plus 可二次开发的模板是一个非常实用的工具,在前端项目开发中,它可以大大提升开发效率代码质量,让前端开发者更加专注于需求实现本身,而非底层细节的处理。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值