vue前端分页--增删改查

<template>
  <div>
    <div class="btn">
      <Button type="primary" @click="addHandClick()">新增</Button>
      &nbsp; &nbsp;
      <Button type="error" @click="deleClick()">批量删除</Button>
      &nbsp; &nbsp;
      <Upload
        action=""
        :before-upload="upload_dp_itly"
        slot="extra"
        :loading="true"
      >
        <Button type="primary" icon="ios-cloud-upload-outline" class="aaa"
          >加载</Button
        >
        &nbsp;
      </Upload>
    </div>

    <Table
      border
      :columns="columns2"
      :data="tableData"
      @on-selection-change="changeSelect"
    ></Table>
    <Page
      :total="total"
      show-elevator
      show-total
      show-sizer
      :page-size-opts="pageSizeOpts"
      :page-size="pageSize"
      :current="current"
      @on-change="handPageChange"
    ></Page>

    <Modal v-model="modal1" :title="title">
      <Form
        ref="formValidate"
        :model="formValidate"
        :rules="ruleValidate"
        :label-width="80"
      >
        <Form-item label="姓名" prop="name">
          <Input
            v-model="formValidate.name"
            :disabled="flag"
            placeholder="请输入姓名"
          ></Input>
        </Form-item>
        <Form-item label="年龄" prop="age">
          <Input
            v-model="formValidate.age"
            number
            placeholder="请输入年龄"
            :disabled="flag"
          ></Input>
        </Form-item>
        <Form-item label="地址" prop="address">
          <Input
            v-model="formValidate.address"
            placeholder="请输入地址"
            :disabled="flag"
          ></Input>
        </Form-item>
        <Form-item label="省份" prop="province">
          <Input
            v-model="formValidate.province"
            placeholder="请输入省份"
            :disabled="flag"
          ></Input>
        </Form-item>
        <Form-item label="市区" prop="city">
          <Input
            v-model="formValidate.city"
            :disabled="flag"
            placeholder="请输入市区"
          ></Input>
        </Form-item>
        <Form-item label="邮编" prop="zip">
          <Input
            v-model="formValidate.zip"
            number
            :disabled="flag"
            placeholder="请输入邮编"
          ></Input>
        </Form-item>
      </Form>
      <div slot="footer">
        <Button type="primary" @click="handleSubmit('formValidate')"
          >确定</Button
        >
        <Button @click="handleReset('formValidate')">取消</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ID: [],
      pageSizeOpts: [10, 20, 30, 40],
      total: 0,
      current: 1,
      pageSize: 5,
      nums: 1,
      flag: false,
      title: "新增",
      modal1: false,
      columns2: [
        {
          type: "selection",
          width: 60,
          fixed: "left",
        },
        {
          title: "姓名",
          key: "name",
          width: 100,
        },
        {
          title: "年龄",
          key: "age",
          width: 100,
        },
        {
          title: "省份",
          key: "province",
          width: 100,
        },
        {
          title: "市区",
          key: "city",
          width: 100,
        },
        {
          title: "地址",
          key: "address",
          width: 200,
        },
        {
          title: "邮编",
          key: "zip",
          width: 100,
        },
        {
          title: "操作",
          key: "action",
          width: 250,
          fixed: "right",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small",
                  },
                  style: {
                    marginRight: "10px",
                  },
                  on: {
                    click: () => {
                      this.nums = 2;
                      this.addHandClick(params.row);
                    },
                  },
                },
                "查看"
              ),
              h("Tooltip", {
                props: {
                  placement: "top",
                  transfer: true,
                  content: "ReStart this task……",
                },
              }),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small",
                  },
                  style: {
                    marginRight: "5px",
                  },
                  on: {
                    click: () => {
                      this.handDele(params.row, params.index);
                    },
                  },
                },
                "删除"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "success",
                    size: "small",
                  },
                  style: {},
                  on: {
                    click: () => {
                      this.nums = 1;
                      this.addHandClick(params.row);
                    },
                  },
                },
                "编辑"
              ),
            ]);
          },
        },
      ],
      data4: [
        {
          id: 1,
          name: "王小明",
          age: 18,
          address: "北京市朝阳区芍药居",
          province: "北京市",
          city: "朝阳区",
          zip: 100000,
        },
        {
          id: 2,
          name: "张小刚",
          age: 25,
          address: "北京市海淀区西二旗",
          province: "北京市",
          city: "海淀区",
          zip: 100000,
        },
        {
          id: 3,
          name: "李小红",
          age: 30,
          address: "上海市浦东新区世纪大道",
          province: "上海市",
          city: "浦东新区",
          zip: 100000,
        },
        {
          id: 4,
          name: "周小伟",
          age: 26,
          address: "深圳市南山区深南大道",
          province: "广东",
          city: "南山区",
          zip: 100000,
        },
        {
          id: 5,
          name: "王小明",
          age: 18,
          address: "北京市朝阳区芍药居",
          province: "北京市",
          city: "朝阳区",
          zip: 100000,
        },
        {
          id: 6,
          name: "张小刚",
          age: 25,
          address: "北京市海淀区西二旗",
          province: "北京市",
          city: "海淀区",
          zip: 100000,
        },
        {
          id: 7,
          name: "李小红",
          age: 30,
          address: "上海市浦东新区世纪大道",
          province: "上海市",
          city: "浦东新区",
          zip: 100000,
        },
        {
          id: 8,
          name: "周小伟",
          age: 26,
          address: "深圳市南山区深南大道",
          province: "广东",
          city: "南山区",
          zip: 100000,
        },
      ],
      formValidate: {
        name: "",
        age: "",
        address: "",
        province: "",
        city: "",
        zip: "",
      },
      ruleValidate: {
        name: [
          {
            required: true,
            message: "姓名不能为空",
            trigger: "blur",
          },
        ],
        // age: [{ required: true, message: "年龄不能为空", trigger: "blur" }],
        age: [
          {
            required: true,
            message: "年龄不能为空",
            trigger: "blur",
            transform: (value) => String(value),
          },
        ],
        address: [{ required: true, message: "地址不能为空", trigger: "blur" }],
        province: [
          { required: true, message: "省份不能为空", trigger: "blur" },
        ],
        city: [{ required: true, message: "城市不能为空", trigger: "blur" }],
        zip: [
          {
            transform: (value) => String(value),
            required: true,
            message: "姓名不能为空",
            trigger: "blur",
          },
        ],
      },
      tableData:[],
      allData1: [],
    };
  },
  methods: {
    handleSubmit(name) {
      if (this.formValidate.age && typeof this.formValidate.age !== "number") {
        this.$Message.error("年龄必须为数字");
        return;
      }

      if (this.formValidate.zip && typeof this.formValidate.zip !== "number") {
        this.$Message.error("邮编必须为数字");
        return;
      }

      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$Message.success("提交成功!");
          switch (this.nums) {
            case 3:
              console.log("新增接口");
              break;
            case 2:
              console.log("查看接口");
              break;
            case 1:
              console.log("编辑接口");
              break;
          }
          this.modal1 = false;
        } else {
          this.$Message.error("必填項未填!");
        }
      });
    },
    handleReset(name) {
      this.modal1 = false;
      // this.formValidate.name = "";
      // this.formValidate.age = "";
      // this.formValidate.address = "";
      // this.formValidate.province = "";
      // this.formValidate.city = "";
      // this.formValidate.zip = "";
      this.$refs[name].resetFields();
    },
    addHandClick(row) {
      this.modal1 = true;
      console.log(row);
      if (row === undefined) {
        this.nums = 3;
      }

      switch (this.nums) {
        case 1:
          this.title = "编辑";
          this.flag = false;
          this.formValidate.name = row.name;
          this.formValidate.age = row.age;
          this.formValidate.address = row.address;
          this.formValidate.province = row.province;
          this.formValidate.city = row.city;
          this.formValidate.zip = row.zip;
          break;
        case 2:
          this.title = "查看";
          this.flag = true;
          this.formValidate.name = row.name;
          this.formValidate.age = row.age;
          this.formValidate.address = row.address;
          this.formValidate.province = row.province;
          this.formValidate.city = row.city;
          this.formValidate.zip = row.zip;
          break;
        case 3:
          this.title = "新增";
          this.flag = false;
          this.formValidate.name = "";
          this.formValidate.age = "";
          this.formValidate.address = "";
          this.formValidate.province = "";
          this.formValidate.city = "";
          this.formValidate.zip = "";
          break;
      }

      // if (row === undefined) {
      //   this.title = "新增";
      //   this.formValidate.name = "";
      //   this.formValidate.age = "";
      //   this.formValidate.address = "";
      //   this.formValidate.province = "";
      //   this.formValidate.city = "";
      //   this.formValidate.zip = "";
      // } else {
      //   this.title = "编辑";
      //   this.formValidate.name = row.name;
      //   this.formValidate.age = row.age;
      //   this.formValidate.address = row.address;
      //   this.formValidate.province = row.province;
      //   this.formValidate.city = row.city;
      //   this.formValidate.zip = row.zip;
      // }
    },
    handDele(row, index) {
      this.$Modal.confirm({
        title: "警告",
        content: "<p>确定删除 " + row.name + " 吗？</p>",
        onOk: () => {
          // this.data.splice(index, 1);
          this.$Message.success("删除成功!");
        },
        onCancel: () => {
          this.$Message.info("取消删除");
        },
      });
    },

    handPageChange(index) {
      console.log(index);
      this.current = index;
      this.getTabelData();
    },

    async upload_dp_itly(file) {
      let param = new FormData();
      param.append("file", file);
      // await uploadDPItly(param).then((res) => (this.data4 = res.data));
    },

    //全选
    changeSelect(selection) {
      console.log(111, selection);
      this.ID = [];
      selection.forEach((item) => this.ID.push(item.id));
    },

    //全选删除
    deleClick() {
      if (this.ID.length === 0) {
        this.$Message.error("请选中要删除的内容");
        return;
      }
      console.log("批量删除接口", this.ID);
      this.$Message.success("删除成功");
    },

    getTabelData() {
      this.tableData = this.allData1.slice(
        (this.current - 1) * this.pageSize,
        this.current * this.pageSize
      );
      this.total = this.allData1.length;
    },
  },
  mounted() {
    this.allData1 = this.data4;
    this.getTabelData();
  },
};
</script>

<style scoped>
.btn {
  display: inline-flex;
}
</style>