element列表-检索条件form表单定义

最新推荐文章于 2024-07-30 16:12:41 发布

綒华

最新推荐文章于 2024-07-30 16:12:41 发布

阅读量564

点赞数 10

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/m0_66921738/article/details/135821384

版权

本文介绍了使用React和Vue.js开发的一个后台管理系统，详细展示了如何通过表单实现用户对帖子的搜索功能，包括平台选择、账号筛选、内容输入、时间范围选择以及发送结果过滤，同时配合分页组件进行数据展示。

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

// 列表
const resultData: any = ref([])
const getList = () => {
  loading.value = true
  let params = formSearch
  if (formSearch.czTime) {
    params.time1 = formSearch.czTime[0]
    params.time2 = formSearch.czTime[1]
  } else {
    params.time1 = ''
    params.time2 = ''
  }
  Api.getPostList(params).then((res) => {
    resultData.value = res
    total.value = res.tatle
  })
}
// 搜索
const formSearch = reactive({
  platform: '',
  users: '',
  info: '',
  result: '',
  czTime: '',
  time1: '',
  time2: '',
  order: '',
  page: 1,
  pageSize: 10
})
const onSearch = () => {
  formSearch.page = 1
  getList ()
}
// 分页
const total = ref(0)
const handleCurrentChange = (val: number) => {
  formSearch.page = val
  getList ()
}

<template>
<div class="text-xl mb-7">发帖管理</div>
    <div class="search">
      <el-form :inline="true" :model="formSearch" class="demo-form-inline">
        <el-form-item label="平台">
          <el-select
            clearable
            class="ml-10px"
            v-model="formSearch.platform"
            @change="platChang2"
            placeholder="请选择平台"
          >
            <el-option
              v-for="item in platformSelc"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="账号">
          <el-select clearable class="ml-10px" v-model="formSearch.users" placeholder="请选择账号">
            <el-option
              v-for="item in countSelcTwo"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="内容">
          <el-input v-model="formSearch.info" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="操作时间">
          <el-date-picker
            v-model="formSearch.czTime"
            value-format="YYYY-MM-DD HH:mm:ss"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </el-form-item>
        <el-form-item label="发送结果">
          <el-select clearable class="ml-10px" v-model="formSearch.result" placeholder="请选择">
            <el-option
              v-for="item in resultSelc"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
<!--table--!>
<div class="flex justify-between mt-4 px-6">
      <div class="text-sm text-[var(--app-text-color-primary-ligher)]"
        >已为您找到{{ total }}条信息</div
      >
      <el-pagination
        background
        class="mt-6"
        layout=" prev, pager, next"
        v-model:current-page="formSearch.page"
        v-model:page-size="formSearch.pageSize"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </div>
</template>