Vue增删查改模板(表格,无分页)

<template>
  <div class="loop-box">
    <div class="loop-action-bar">
      <el-button type="primary" plain @click="showAdd()">添加轮播图</el-button>
    </div>
    <div class="loop-list-box">
      <el-table :data="bodyData" style="width: 100%" v-loading="loading">
        <el-table-column prop="title" label="标题" width="120">
        </el-table-column>
        <el-table-column prop="imageUrl" label="图片路径" width="120">
        </el-table-column>
        <el-table-column label="state" width="120">
          <template slot-scope="scope">
            <div v-if="scope.row.state === '1'">
              <el-tag type="success">正常</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="targetUrl" label="定向路径"> </el-table-column>
        <el-table-column label="创建时间">
          <!-- 插槽用法 -->
          <template slot-scope="scope">
            <span v-text="formatDate(scope.row.createTime)"></span>
          </template>
        </el-table-column>
        <el-table-column label="更新时间">
          <template slot-scope="scope">
            <span v-text="formatDate(scope.row.updateTime)"></span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="showEdit(scope.row)"
              >编辑</el-button
            >
            <el-button type="danger" size="mini" @click="deleteById(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="navigation-bar">
      <!-- 分页部分 -->
    </div>
    <!-- 删除对话框 -->
    <div class="loop-dialog-box">
      <el-dialog
        title="删除提示"
        :visible.sync="dialogVisible_delete"
        width="30%"
        :before-close="handleClose"
      >
        <span>你确定要删除：{{ deleteMessage }}这个分类吗？</span>
        <span slot="footer" class="dialog-footer">
          <el-button
            @click="dialogVisible_delete = false"
            type="danger"
            size="mini"
            >取 消</el-button
          >
          <el-button type="primary" @click="doDeleteItem()" size="mini"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
    <!-- 添加或更新的对话框 -->
    <div class="loop-dialog-addOrUpdate-box">
      <el-dialog
        :title="editTitle"
        :visible.sync="dialogVisible_addOrUpdate"
        width="30%"
        :before-close="handleClose"
      >
        <el-form
          :label-position="labelPosition"
          label-width="80px"
          :model="dataForm"
        >
          <el-form-item label="名称">
            <el-input v-model="dataForm.name"></el-input>
          </el-form-item>
          <el-form-item label="分类拼音">
            <el-input v-model="dataForm.pinyin"></el-input>
          </el-form-item>
          <el-form-item label="分类描述">
            <el-input
              type="textarea"
              resize="none"
              :rows="2"
              v-model="dataForm.description"
            ></el-input>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="initForm()" type="danger">取 消</el-button>
          <el-button type="primary" @click="doEdit()">{{
            editorCommitText
          }}</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import * as api from "@/api/axios";
import * as dateUtils from "@/utils/date";
export default {
  //import 引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
    //这里存数据
    return {
      bodyData: [
        // {
        //   id: "1",
        //   imageUrl: "1",
        //   state: "1",
        //   targetUrl: "1",
        //   title: "1",
        //   state: "1",
        //   createTime: "2020",
        //   updateTime: "2020",
        // },
      ],
      dialogVisible_delete: false,
      dialogVisible_addOrUpdate: false,
      deleteMessage: "",
      deleteTarget: "",
      labelPosition: "right",
      addOrEdit: "edit",
      loading: true,
      dataForm: {
        id: "",
        name: "",
        pinyin: "",
        description: "",
      },
      editorCommitText: "修改分类",
      editTitle: "编辑分类",
    };
  },
  //计算属性
  computed: {},
  //监控data中数据变化
  watch: {},
  //方法
  methods: {
    
    //日期转换
    formatDate(dateStr) {
      var date = new Date(dateStr);
      return dateUtils.formatDate(date, "yyyy-MM-dd hh:mm:ss");
    },
    //确认关闭对话框
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          this.initForm();
          done();
        })
        .catch((_) => {});
    },
    //初始化表单对象
    initForm() {
      //给表单对象 this.dataForm 初始化
      this.dialogVisible_addOrUpdate = false;
    },
      
    //获取分类列表
    getList() {
      //去获取分类列表
      //给 this.bodyData 赋值对象数据
      this.loading = false;
    },
    //获取当前对象
    getBodyData(categoryId) {
      //防止多人同时修改，可以用mybatis-plus的version 乐观锁
      //也就是获取当前对象 发送axios请求吧
      this.dialogVisible_addOrUpdate = false;
    },
      //删除 ,打开删除窗口
    deleteById(item) {
      //打开删除窗口，
      //进行数据的获取，获取当前对象和删除的对象的名称
      //为了执行删除操作可以获取到id
      this.dialogVisible_delete = true;
      console.log(item);
    },
    //执行删除操作
    doDeleteItem() {
      //执行删除请求
      //完了记得获取最新数据列表
      this.getList();
      this.dialogVisible_delete = false;
    },
    //打开编辑分类 的对话框
    showEdit(item) {
      (this.editorCommitText = "修改分类"),
        (this.editTitle = "编辑分类"),
        (this.addOrEdit = "edit");
      //调用方法获取最新的数据
      this.getBodyData(item.id);
      this.dialogVisible_addOrUpdate = true;
      // console.log(item);
    },
    //打开添加对话框
    showAdd() {
      (this.editorCommitText = "添加分类"),
        (this.editTitle = "添加分类"),
        (this.addOrEdit = "add");
      //初始化表单对象
      this.initForm();
      this.dialogVisible_addOrUpdate = true;
    },
    //执行编辑或执行添加操作
    doEdit() {
      console.log("修改或添加分类");
      if (this.addOrEdit === "edit") {
        //执行修改
        //完了记得获取最新数据列表
      } else {
        //先判断数据是否为空
        //然后进行添加
        //完了记得获取最新数据列表
      }
      this.dialogVisible_addOrUpdate = false;
    },
  },
  //声明周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getList();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //声明周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁之后
  activated() {}, //缓存keep-alive
};
</script>

<style scoped>
</style>

有分页(只有删除和搜索)

//用户列表
<template>
  <div class="loop-box">
    <div class="loop-action-bar">
      <el-button type="warning" plain disabled>搜索用户</el-button>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="用户名">
          <el-input
            v-model="formInline.userName"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input
            v-model="formInline.email"
            placeholder="请输入邮箱"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button @click="resetForm()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="loop-list-box">
      <el-table :data="bodyData" style="width: 100%" v-loading="loading">
        <el-table-column prop="userName" label="用户名" width="120">
        </el-table-column>
        <el-table-column prop="roles" label="角色" width="120">
          <template slot-scope="scope">
            <div v-if="scope.row.roles === 'role_normal'">
              <el-tag>普通用户</el-tag>
            </div>
            <div v-if="scope.row.roles === 'role_admin'">
              <el-tag type="success">管理员</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="state" width="120">
          <template slot-scope="scope">
            <div v-if="scope.row.state === '1'">
              <el-tag type="success">正常</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="头像">
          <template slot-scope="scope">
            <div class="block">
              <el-avatar :size="50" :src="scope.row.avatar"> </el-avatar>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="email" label="邮箱地址"></el-table-column>
        <el-table-column prop="sign" label="签名"></el-table-column>
        <el-table-column label="创建时间">
          <!-- 插槽用法 -->
          <template slot-scope="scope">
            <span v-text="formatDate(scope.row.createTime)"></span>
          </template>
        </el-table-column>
        <el-table-column label="更新时间">
          <template slot-scope="scope">
            <span v-text="formatDate(scope.row.updateTime)"></span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="danger" size="mini" @click="deleteById(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-row :gutter="20">
      <el-col :span="8" :offset="8">
        <div class="navigation-bar" style="padding-top: 40px">
          <!-- 分页部分 -->
          <el-pagination
            background
            layout="total, prev, pager, next, jumper"
            :hide-on-single-page="true"
            :page-size="PageformData.size"
            :current-page="PageformData.current"
            :total="PageformData.total"
            @prev-click="prevPage"
            @next-click="nextPage"
            @current-change="currentPageChange"
          >
          </el-pagination>
        </div>
      </el-col>
    </el-row>

    <!-- 删除对话框 -->
    <div class="loop-dialog-box">
      <el-dialog
        title="删除提示"
        :visible.sync="dialogVisible_delete"
        width="30%"
        :before-close="handleClose"
      >
        <span>你确定要删除：{{ deleteMessage }}这个用户吗？</span>
        <span slot="footer" class="dialog-footer">
          <el-button
            @click="dialogVisible_delete = false"
            type="danger"
            size="mini"
            >取 消</el-button
          >
          <el-button type="primary" @click="doDeleteItem()" size="mini"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import * as api from "@/api/axios";
import * as dateUtils from "@/utils/date";
export default {
  //import 引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
    //这里存数据
    return {
      formInline: {
        userName: "",
        email: "",
      },
      bodyData: [],
      dialogVisible_delete: false,
      dialogVisible_addOrUpdate: false,
      deleteMessage: "",
      deleteTarget: "",
      labelPosition: "right",
      addOrEdit: "edit",
      loading: true,
      dataForm: {
        id: "",
        userName: "",
        roles: "",
        avatar: "",
        email: "",
        sign: "",
        state: "",
      },
      PageformData: {
        size: 5,
        currentPage: 1,
        total: 5,
      },
      editorCommitText: "修改对象",
      editTitle: "编辑对象",
    };
  },
  //计算属性
  computed: {},
  //监控data中数据变化
  watch: {},
  //方法
  methods: {
    //获取对象列表
    getList(currentPage) {
      //去获取对象列表
      this.PageformData.currentPage =
        currentPage === undefined ? this.PageformData.currentPage : currentPage;
      //给 this.bodyData 赋值对象数据
      api.getUserList(this.PageformData).then((resp) => {
        // console.log(resp);
        if (resp.code === api.success_code) {
          this.bodyData = resp.data.records;
          this.PageformData.size = resp.data.size;
          this.PageformData.total = resp.data.total;
          this.PageformData.currentPage = resp.data.current;
          api.toast_succ(resp.message);
        } else {
          api.toast_err(resp.message);
        }
      });
      this.loading = false;
    },
    //日期转换
    formatDate(dateStr) {
      var date = new Date(dateStr);
      return dateUtils.formatDate(date, "yyyy-MM-dd hh:mm:ss");
    },
    //确认关闭对话框
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    //删除 ,打开删除窗口
    deleteById(item) {
      //打开删除窗口，
      //进行数据的获取，获取当前对象和删除的对象的名称
      this.deleteMessage = item.userName;
      this.deleteTarget = item;
      //为了执行删除操作可以获取到id
      this.dialogVisible_delete = true;
      console.log(item);
    },
    //执行删除操作
    doDeleteItem() {
      //执行删除请求
      api.deleteUser(this.deleteTarget.id).then((resp) => {
        if (resp.code === api.success_code) {
          api.toast_succ(resp.message);
          //完了记得获取最新数据列表
          this.getList();
        } else {
          api.toast_err(resp.message);
        }
      });
      this.dialogVisible_delete = false;
    },
    //搜索
    onSubmit() {
      console.log("submit!");
      api
        .doUserSearch(this.formInline.userName, this.formInline.email)
        .then((resp) => {
          // console.log(resp);
          if (resp.code === api.success_code) {
            this.bodyData = resp.data.records;
            this.PageformData.size = resp.data.size;
            this.PageformData.total = resp.data.total;
            this.PageformData.currentPage = resp.data.current;
            api.toast_succ(resp.message);
          } else {
            api.toast_err(resp.message);
          }
        });
    },
    //上一页
    prevPage() {
      this.getList(this.PageformData.currentPage - 1);
    },
    //下一页
    nextPage() {
      this.getList(this.PageformData.currentPage + 1);
    },
    //重置搜索
    resetForm(formName) {
      console.log("重置");
      this.formInline.userName = "";
      this.formInline.email = "";
      this.PageformData.size = 5;
      this.getList(1);
    },
    //currentPage 改变时会触发
    currentPageChange(page) {
      this.getList(page);
    },
  },
  //声明周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getList(1);
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //声明周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁之后
  activated() {}, //缓存keep-alive
};
</script>

<style scoped>
</style>

未填充内容的空模板

<template>
<div></div>
</template>

<script>
export default {
//import 引入的组件需要注入到对象中才能使用
components:{},
props:{},
data(){
//这里存数据
return{};
},
//计算属性
computed: {

},
//监控data中数据变化
watch: {

},
//方法
methods: {

},
//声明周期 - 创建完成（可以访问当前this实例）
created() {

},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
beforeCreate() {},//生命周期 - 创建之前
beforeMount() {},//生命周期 - 挂载之前
beforeUpdate() {},//声明周期 - 更新之前
updated() {},//生命周期 - 更新之后
beforeDestroy() {},//生命周期 - 销毁之前
destroyed() {},//生命周期 - 销毁之后
activated() {},//缓存keep-alive
}
</script>

<style scoped>
</style>

（后期会分享整个增删改查+搜索+分页模板）