[JavaScript知识库]Vue管理端页面常用查询新增编辑删除功能

第一部分, 列表(表格)页面内容

包含功能

• 页面布局
• 搜索
• 表格
• 分页

代码部分

<template>
  <div class="page">
    <!-- 使用表单可以实现更好布局 -->
    <el-form :inline="true" :model="search" class="searchForm">
      <el-form-item>
        <el-input v-model="search.keyword1" placeholder="请输入关键字"></el-input>
      </el-form-item>
      <el-form-item label="关键字">
        <el-input v-model="search.keyword2" placeholder="请输入关键字2"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="search.state" placeholder="请选择">
          <el-option label="状态一" value="1"></el-option>
          <el-option label="状态二" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="onSubmitSearch">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table :data="tableData" stripe style="width: 100%">
      <!-- 多字段 -->
      <template v-for="(val, key) in tableColumn">
        <el-table-column :key="key" :prop="val.prop" :label="val.label" :width="val.width" :align="val.align"></el-table-column>
      </template>
      <!-- 行 操作  fixed固定两个值 right,left -->
      <el-table-column fixed="right" label="操作" width="100" align="center">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页配置 -->
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
// 引入接口 中请求表格数据的方法
// import { getTableData } from '@/api/user';
export default {
  // 当前页面 组件名称 ,不同的名称可以提高识别度,
  name: "tableBase",
  // 页面数据定义
  data() {
    return {
      // 搜索表单
      search: {
        // 关键字1 标题...
        keyword1: "",
        // 关键字2 类型...
        keyword2: "",
        // 其他组件 选择器...
        state: undefined,
      },
      // 分页基本配置
      page: {
        // 当前页 默认: 第1页
        currentPage: 1,
        // 页面数据条数 默认: 10条
        pageSize: 10,
        // 数据总条数
        total: 3,
      },
      // 表格中的数据
      tableData: [
        // 第一行的 数据 字段名: 字段值
        { id: 1, name: "用户名1", sex: 1, time: "2021-10-20 20:00:00" },
        { id: 2, name: "用户名2", sex: 2, time: "2021-10-20 20:00:00" },
        { id: 3, name: "用户名3", sex: 1, time: "2021-10-20 20:00:00" },
      ],
      // 表格的列 配置
      tableColumn: [
        // 第一列的 标题, 字段名, 宽度, 列中对齐方式 left,center,right
        { label: "编号", prop: "id", width: "80px", align: "left" },
        { label: "用户名", prop: "name", width: "100px" },
        { label: "性别", prop: "sex", width: "100px" },
        { label: "创建时间", prop: "time" },
      ],
    };
  },
  created() {
    // 创建页面时
    // 此时加载数据或使用Dom 操作 this或 Dom 多半会出错
  },
  mounted() {
    // Dom 加载后
    this.$nextTick(() => {
      // 获取表格数据
      this.getTableData();
    });
  },
  // 全局方法(当前页面)
  methods: {
    // 提交搜索表单
    onSubmitSearch() {
      // 这里还可以根据业务处理其他问题
      // 改变查询参数后 调用列表查询
      this.getTableData();
    },
    // 请求表格数据
    getTableData() {
      // 配置请求参数
      let params = {};
      // 基本参数中加入分页
      params = Object.assign(params, this.page);
      // 判断搜索值是否填写
      if (this.search.keyword1) {
        // 具体 几个查询字段 根据自己的业务情况来
        params["keyword1"] = this.search.keyword1;
      }
      // 不需要判断时
      // params = Object.assign(params, ...this.search);
      // 发起请求
      // getTableData(params).then(res => {
      //    判断接口返回数据 是否成功, 数据条数 大于0 才更新表格数据
      //   if (res.code === 0 && res.data.length > 0) {
      //     const resData = res.data;
      //     this.tableData = resData.data;
      //     this.page.currentPage = resData.currentPage;
      //     this.page.pageSize = resData.pageSize;
      //     this.page.total = resData.total;
      //   }
      // });
    },
    // 修改每页数据条数(默认10条)
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.getTableData();
    },
    // 修改当前页面(跳转页面)
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.getTableData();
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  padding: 10px;

  .pagination {
    padding-top: 10px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
}
</style>

结尾

还有具体行操作方法页面 看得人多或者点赞多的话后面会写出来
代码中还有不足的地方, 可以在评论中指出来, 博主有空的话会更正的