vue3 + ts用ts定义data数据的方法与使用axios拿到后台数据与前端分页

小小亮01

已于 2023-08-08 09:27:59 修改

阅读量3.9k

点赞数 1

分类专栏： vue3 文章标签： javascript 前端 vue.js

于 2023-02-25 11:11:08 首次发布

本文链接：https://blog.csdn.net/weixin_43845137/article/details/129213392

版权

vue3 专栏收录该内容

51 篇文章 4 订阅

订阅专栏

vue3 + ts用ts定义data数据的方法与使用axios拿到后台数据与前端分页

方式1 type

type RuleForm = {
  user: string;
  pwd: string;
};
const ruleForm: RuleForm = reactive({
  user: "",
  pwd: "",
});

方式2 使用接口的形式抽离到type/xxx.ts

type.login.ts

export interface LoginForm {
  user: string;
  pwd: string;
}
export class LoginData {
  ruleForm: LoginForm = {
    user: "",
    pwd: "",
  };
}

login.vue

// 方式2
// const ruleForm: LoginForm = reactive({
//   user: "",
//   pwd: "",
// });
// 方式3
const data = reactive(new LoginData());
console.log("data", data);

axios拿到后台数据

api

export function goodHttp() {
  return http({
    url: "/getGoodsList",
    method: "get",
  });
}

页面

<script setup lang="ts" name="GoodView">
import { onMounted, reactive, ref } from "vue";
import { goodHttp } from "@/request/api";
import { GoodInitData } from "@/type/good";

const formData = reactive(new GoodInitData().selectData);
let tableData = ref(new GoodInitData().list);

const onSubmit = () => {
  console.log("submit!");
};
// 获取后台数据
const goodHttpApi = async () => {
  await goodHttp().then((res) => {
    tableData.value = res.data;
  });
};

onMounted(() => {
  goodHttpApi();
});
</script>

axios拿到后台数据之前端分页

api

export function goodHttp() {
  return http({
    url: "/getGoodsList",
    method: "get",
  });
}

页面

<template>
  <div class="GoodView">
    <div>
      formData - {{ formData }}
      <el-form :inline="true" :model="formData" class="demo-form-inline">
        <el-form-item label="标题">
          <el-input v-model="formData.title" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="详情">
          <el-input v-model="formData.introduce" placeholder="请输入" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <!-- dataList - {{ dataList.comList }} -->
      <el-table :data="dataList.comList" style="width: 100%" border>
        <el-table-column prop="userId" label="userId" width="60" />
        <el-table-column prop="id" label="id" width="60" />
        <el-table-column prop="title" label="title" width="100" />
        <el-table-column prop="introduce" label="introduce" />
      </el-table>
      <el-pagination
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableDataTotal"
        v-model:current-page="formData.page"
        v-model:page-size="formData.pageSize"
        :page-sizes="[5, 10, 15, 20]"
        @current-change="currentChange"
        @size-change="sizeChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts" name="GoodView">
import { computed, onMounted, reactive, ref, watch } from "vue";
import { goodHttp } from "@/request/api";
import { GoodInitData, ListInt } from "@/type/good";

const formData = reactive(new GoodInitData().selectData);
let tableData = ref(new GoodInitData().list);
let tableDataTotal = ref<number>(0);

const dataList = reactive({
  comList: computed(() => {
    // 1 => [1-10]; 2 => [11-20];
    return tableData.value.slice(
      (formData.page - 1) * formData.pageSize, // page为1 => 0
      formData.page * formData.pageSize // pageW为1 => 10
    );
  }),
});

const currentChange = (page: number) => {
  formData.page = page;
};
const sizeChange = (pageSize: number) => {
  formData.pageSize = pageSize;
};
// 查询
const onSubmit = () => {
  let arr: ListInt[] = []; // 定义数组，用来查询后的数据渲染
  if (formData.title || formData.introduce) {
    // 判断是否有值
    if (formData.title) {
      // 查询标题
      arr = tableData.value.filter((val) => {
        return val.title.indexOf(formData.title) !== -1;
      });
    }
    if (formData.introduce) {
      // 查询详情
      arr = tableData.value.filter((val) => {
        return val.introduce.indexOf(formData.introduce) !== -1;
      });
    }
  } else {
    arr = tableData.value;
  }
  tableDataTotal.value = arr.length || 0;
  tableData.value = arr;
};
// 监听输入框的属性
watch([() => formData.title, () => formData.introduce], () => {
  if (formData.title === "" && formData.introduce === "") {
    goodHttpApi();
    formData.page = 1;
    formData.pageSize = 10;
  }
});
// 前端分页处理
onMounted(() => {
  goodHttpApi();
});
// 获取table数据
const goodHttpApi = async () => {
  await goodHttp().then((res) => {
    tableData.value = res.data;
    tableDataTotal.value = res.data?.length || 0;
  });
};
</script>

<style lang="scss" scoped></style>

types / good.ts

export interface ListInt {
  userId: number;
  id: number;
  title: string;
  introduce: string;
}
export interface selectData {
  title: string;
  introduce: string;
  page: number;
  count: number;
  pageSize: number;
}
export class GoodInitData {
  selectData: selectData = {
    title: "",
    introduce: "",
    page: 1,
    count: 0,
    pageSize: 10,
  };
  list: ListInt[] = [];
}

vue2 前端分页和前端移除

      <div class="table-wrap">
        <div class="table-header">
          <div class="td1">序号</div>
          <div class="td2">姓名</div>
          <div class="td3">手机号</div>
          <div class="td4">数据来源</div>
          <div class="td5">操作</div>
        </div>
        <div class="table-tbody">
          <div class="table-tr">
            <div class="td1">-</div>
            <div class="td2"><input type="text" class="table-ipt" placeholder="请输入姓名" v-model.trim="newData.name" style="width:180px;height:28px" /></div>
            <div class="td3"><input type="text" class="table-ipt" placeholder="请输入手机号" v-model.trim="newData.phone" style="width:180px;height:28px" /></div>
            <div class="td4">手动添加</div>
            <div class="td5 action-btn" @click="handleConfirm">确定</div>
          </div>
          <div>
            <div class="table-tr" v-for="(row,idx) in showTableData" :key="idx">
              <div class="td1">{{ idx + 1 }}</div>
              <div class="td2">{{ row.name }}</div>
              <div class="td3">{{ row.phone }}</div>
              <div class="td4">{{ row.origin }}</div>
              <div class="td5 action-btn"><span class="action-btn" type="text" @click="handleRemove(row,idx)">移除</span></div>
            </div>
          </div>
        </div>
      </div>
      <div class="page">
        <!-- [10, 20, 50, 100, 150, 200] -->
        <Page
          :total="total"
          :current="pageNum"
          :page-size="pageSize"
          :page-size-opts="[10, 20, 50]"
          @on-change="pageChange"
          @on-page-size-change="pagesizeChange"
          show-elevator
          show-sizer
          show-total
          class="page_style"
        />
      </div>

      total: 0,
      pageNum: 1,
      pageSize: 10,
      tableData: [
        {
          name:'1',
          phone:'1',
          origin:'excel导入'
        },
        {
          name:'2',
          phone:'2',
          origin:'excel导入'
        },
        {
          name:'3',
          phone:'3',
          origin:'excel导入'
        },
        {
          name:'4',
          phone:'4',
          origin:'excel导入'
        },
        {
          name:'5',
          phone:'5',
          origin:'excel导入'
        },
        {
          name:'6',
          phone:'6',
          origin:'excel导入'
        },
        {
          name:'7',
          phone:'7',
          origin:'excel导入'
        },
        {
          name:'8',
          phone:'8',
          origin:'excel导入'
        },
        {
          name:'9',
          phone:'9',
          origin:'excel导入'
        }
      ],
      newData: {
        name: '',
        phone: '',
        origin:'手动添加'
      },

  computed:{
    showTableData(){
      let res = []
      if ( this.tableData && this.tableData.length > 0 ) {
        res = this.tableData.slice(
          (this.pageNum - 1) * this.pageSize, // page为1 => 0
          this.pageNum * this.pageSize // pageW为1 => 10
        );
      } else {
        res = []
      }
      return res;
    }
  },
 
    //  分页-start
    pageChange(pageNumber) {
      this.pageNum = pageNumber;
    },
    pagesizeChange(pagesize) {
      this.pageNum = 1;
      this.pageSize = pagesize;
    },
    // 移除 todo计算真正的index值
    handleRemove(row,index) {
      // 处理操作逻辑
      console.log('Remove',row,index);
      // 实际上 删除的索引值
      let lastIndex = index + (this.pageSize * (this.pageNum - 1) )
      console.log('lastIndex',lastIndex);
      this.$confirm('确定移除?', '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.tableData = this.tableData && this.tableData.length > 0 && this.tableData.filter((item,idx)=>{
            return idx !== lastIndex
          })
          this.total = this.tableData.length || 0;
          this.$Message.success('操作成功！')
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
    },
    // 确定
    handleConfirm() {
      if ( this.newData.name && this.newData.phone) {
        this.tableData.unshift({ ...this.newData });
        this.newData.name = '';
        this.newData.phone = '';
        this.total = this.tableData.length || 0;
      } else {
        this.$Message.warning('请填写姓名与手机号');
      }
    },