vue3.x+element-push实现简易的列表增删改功能

vue3.x+element-push实现简易的列表增删改功能

1,直接贴代码了 (有注释)

<template>
  <div>
    <el-button type="warning" @click="handleEdit(1)" style="margin-bottom:10px">添加</el-button>
    <!-- 表格 -->
    <el-table :data="tableData" border>
      <el-table-column prop="date" label="日期"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
      <el-table-column prop="type" label="状态">
        <template #default="scope"> //vue3.x插槽最新写法
          <span v-if="scope.row.type == 1">成功</span>
          <span v-if="scope.row.type == 2">失败</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200" align="center">
        <template #default="scope">
          <el-button style="margin-right:10px;color:#67C23A" type="text" @click="handleEdit(0)">修改</el-button>
          <el-popconfirm
            confirmButtonText="好的"
            cancelButtonText="不用了"
            title="确定删除吗?"
            @confirm="handleDeleteOne(scope.row.date,scope.$index)"
          >
            <template #reference>
              <el-button type="text" style="color:#F56C6C">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    //分页组件
    <div class="pagination">
      <el-pagination background layout="prev, pager, next" :total="num"></el-pagination>
    </div>
    <!-- 添加+修改弹窗 -->
    <el-dialog :title="type?'添加':'修改'" v-model="dialogVisible" width="30%">
    	//ref rules 表单验证 
      <el-form ref="addForm" :rules="rules" :model="addFormField" label-width="100px">
        <el-form-item label="文件名称" prop="name">
          <el-input v-model="addFormField.name" style="width:220px" placeholder="请输入文件名称"></el-input>
        </el-form-item>
        <el-form-item label="选择时期" prop="date">
          <el-date-picker v-model="addFormField.date" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="选择状态" prop="status">
          <el-select v-model="addFormField.status" placeholder="请选择状态">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="add">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted, ref } from "vue"; //引入vue
import { ElMessage } from "element-plus"; //elementUI库
import axios from "@/utils/axios"; //axios请求地址
export default {
  name: "list",
  setup() {
  	//vue3.x获取ref
    const addForm = ref(null);
    //定义字段
    const state = reactive({
      dialogVisible: false,
      num: 1,
      type: "添加",
      //列表模拟数据
      tableData: [
        {
          date: "2020-04-01",
          name: "张三",
          address: "上海市普陀区金沙江路 1518 弄",
          type: 1,
        },
        {
          date: "2020-04-01",
          name: "李四",
          address: "上海市普陀区金沙江路",
          type: 2,
        },
      ],
      //下拉模拟数据
      options: [
        {
          value: "选项1",
          label: "成功",
        },
        {
          value: "选项2",
          label: "失败",
        },
      ],
      //添加 -- 修改数据
      addFormField: {
        name: "",
        date: "",
        status: "",
      },
      //表单验证
      rules: {
        name: [
          { required: "true", message: "名称不能为空", trigger: ["change"] },
        ],
        date: [
          { required: "true", message: "日期不能为空", trigger: ["change"] },
        ],
        status: [
          { required: "true", message: "状态不能为空", trigger: ["change"] },
        ],
      },
    });
    // 获取列表
    const getShowList = () => {
      state.loading = true;
      //接口调用
      axios
        .post("/user/order/showList", {
          params: {},
        })
        .then((res) => {
          console.log(res);
          // state.tableData = res.data
        });
    };
    //添加修改弹出框
    const handleEdit = (type) => {
      if (type) state.type = true;
      else state.type = false;
      //显示弹窗
      state.dialogVisible = true;
    };
    //点击确定
    const add = () => {
    //表单验证
      addForm.value.validate((valid) => {
        if (valid) {
          //时间转换
          let d = new Date(state.addFormField.date);
          let time =
            d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate();
          state.addFormField.date = time;
           //调用接口 处理逻辑
          console.log(state.addFormField);
          // 清空表单
          addForm.value.resetFields();
        } else return false;
      });
    };
    //删除
    const handleDeleteOne = (id) => {
    //接口调用
      axios
        .post("/user/order/del", {
          data: {
            ids: [id],
          },
        })
        .then(() => {
          ElMessage.success("删除成功");
          getShowList();
        });
    };
    //页面挂载-生命周期
    onMounted(() => {
      // getShowList();
    });
    //将定义的数据全部返回给setup函数
    return {
      add,
      addForm,
      handleEdit,
      handleDeleteOne,
      ...toRefs(state),
    };
  },
};
</script>
<style scoped>
/* 样式 */
.title {
  font-size: 50px;
}
.pagination {
  background: #fff;
  padding: 10px;
  display: flex;
  justify-content: flex-end;
  box-sizing: border-box;
}
</style>

希望此文章对你有帮助;

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Cheng Lucky

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值