vue后台管理知识点、难点总结02

1 elementui分页组件封装（drm）

封装：

<template>
  <el-row style="margin-top: 30px">
    <el-col :span="14" :offset="10">
      <div class="block">
          <!-- :page-sizes="[10, 20, 30, 40]" -->
        <el-pagination
          background
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-col>
  </el-row>
</template>
<script>
export default {
  // props: ['total', 'pageSize', 'currentPage'],
  props: {
    currentPage: { 
      type: [String, Number],
      default: 1,
    },
    total: {
      type: [String, Number],
      default: 0,
    },
    pageSizes: {
      type: Array,
      default: () => [10, 15, 30, 50],
    },
    pageSize: {
      type: [String, Number],
      default: 10,
    },
    // prev表示上一页，next为下一页，pager表示页码列表,jumper表示跳页元素，total表示总条目数，size用于设置每页显示的页码数量
    // total, sizes, prev, pager, next, jumper
    // layout: {
    //   type: String,
    //   default: "total, sizes, prev, pager, next, jumper",
    // },
  },
  data() {
    return {};
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.$emit("sizeChange", val);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.$emit("pagination", val);
    },
  },
};
</script>

引用：

 <pagination
      :total="total"
      :page-size.sync="params.pageSize"
      :current-page.sync="params.pageNo"
      :page-sizes="[5, 10, 15, 20]"
      @sizeChange="handleSizeChange"
      @pagination="getBaseData"
 />

//data数据
params: {
        pageNo: 1,
        pageSize: 10,
      },
  total: 0,
 // js  每页多少条
 handleSizeChange(newSize){
    this.params.pageSize=newSize
    this.getBaseData()
  },

2 查询和重置(drm)

 <el-form-item>
      <el-button type="primary" @click="searchFn">查询</el-button>
      <el-button type="defaul" @click="resetFn">重置</el-button>
 </el-form-item>
// 查询
    searchFn(val) {
      val ? (this.params.pageNo = 1) : null;
      listUser(this.params).then((res) => {
        console.log(res, 123456789);
        this.tableData = res.result.list;
        this.total = res.result.total;
        this.params.pageSize = res.result.size;
        this.params.pageNo = res.result.current;
      });
    },
    // 查询重置
    resetFn() {
      this.params = {};
      this.getBaseData();
    },

3 弹出框 $message,$confirm,$notify

提交–$notify

  //点击提交-修改密码
    submitEditPws() {
      //  if(this.pswForm.lgPasswd==this.pswForm.checklgPasswd &&this.pswForm.lgPasswd!=''&&this.pswForm.checklgPasswd!=''){}
      this.$refs.pswForm.validate((valid) => {
        if (valid) {
          this.pswForm.userId = this.pswUserId;
          updatePasswd(this.pswForm)
            .then((data) => {
              this.$notify({
                title: data.success ? "成功" : "失败",
                message: data.message,
                type: data.success ? "success" : "error",
                duration: 2000,
              });
              // location.reload()
              this.getBaseData();
            })
            .catch((err) => {
              console.log("提交失败", err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

删除 confirm和message

    // 点击编辑和删除
    getEdit(row, remove) {
      console.log(row, "编辑-获取的信息");
      this.form = Object.assign({}, row);
      this.form.orgObj = {
        orgCode: row.orgCode,
        orgId: row.orgId,
        orgName: row.orgName,
      };
      // this.form = Object.assign({},this.form, row);
      if (remove) {
        this.open(row.userId);
      } else {
        this.dialogStatus = "update";
        this.creatDialogVisible = true;
        this.disabledShow = false;
      }
    },
// 删除弹窗提醒
    open(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.removeData(id);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 删除数据
    removeData(uid) {
      const uidData = {};
      uidData.uid8 = uid;
      deleteUser(uidData).then((data) => {
        this.$notify({
          title: data.success ? "成功" : "失败",
          message: data.message,
          type: data.success ? "success" : "error",
          duration: 2000,
        });
        // location.reload()
        this.getBaseData();
      });
    },

4 校验

    // 保存-创建数据
    createData() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.form.orgCode = this.form.orgObj.orgCode;
          this.form.orgName = this.form.orgObj.orgName;
          this.form.orgId = this.form.orgObj.orgId;
          createUser(this.form)
            .then((data) => {
              console.log(data, "创建的数据结果");
              this.creatDialogVisible = false;
              this.$notify({
                title: data.success ? "成功" : "失败",
                message: data.message,
                type: data.success ? "success" : "error",
                duration: 2000,
              });
              // location.reload()
              this.getBaseData();
            })
            .catch((err) => {
              console.log("提交失败", err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

5 点击删除（尚食品）

    //点击删除
    deleteTradeMark(row) {
      this.$confirm(`是否删除${row.tmName}?品牌名称`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
      // 点击删除的确定按钮
        .then(async () => {
          let result = await this.$API.trademark.reqDeleteTradeMark(row.id);
          console.log(result, 777);
          if (result.code == 200) {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.getPageList(this.list.length > 1 ? this.page : this.page - 1);
          }
        })
        // // 点击删除的取消按钮
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

6 scoped使用

组件内，如果style有scoped，需要使用深度选择器，没有的话不用加

7 复制快捷键：shift+alt+向下3箭头

8 tabs 清除浮动

<div slot="header" class="clearfix">
    <span>卡片名称</span>
    <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
</div>

.clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

9 computed属性应用

切换不同页面的标题，可用到computed

  computed: {
    //计算属性-标题
    title() {
      return this.activeName == "sale" ? "销售额" : "访问量";
    },
  },

  <h3>门店{{title}}排行</h3>

  computed:{
    //计算属性-标题
    title(){
      return this.activeName=='sale'?'销售':'访问量'
    }
  },

10 watch应用

首先，tabs切换，可用组件的方法handleClick(tab, event) {}实现title的切换，如下图

用watch的话，如下

  //监听属性
  watch:{
    title(){
      //重新修改图表的配置数据
      this.mycharts.setOption({
        title:{
          text:this.title+'趋势',
        },
      })
    },
  },

11 日期插件 day.js和moment都可

项目中安装

npm install --save dayjs

项目中引入

import * as dayjs from "dayjs";

点击今日，本周，本月，本年的函数（参考dayjs官网）

    setDay() {
      const day = dayjs().format("YYYY-MM-DD");
      this.date = [day, day];
    },
    setWeek() {
      const start = dayjs().day(1).format("YYYY-MM-DD");
      const end = dayjs().day(7).format("YYYY-MM-DD");
      this.date = [start, end];
    },
    setMonth() {
      const start = dayjs().startOf("month").format("YYYY-MM-DD");
      const end = dayjs().endOf("month").format("YYYY-MM-DD");
      this.date = [start, end];
    },
    setYear() {
      const start = dayjs().startOf("year").format("YYYY-MM-DD");
      const end = dayjs().endOf("year").format("YYYY-MM-DD");
      this.date = [start, end];
    },

12 echarts报错：echarts.js?1be7:2286 Can’t get DOM width or height,不显示图标

 <div class="charts" ref="charts"></div>


//初始化echarts实例
    let lineCharts = echarts.init(this.$refs.charts);
    //配置数据
    lineCharts.setOption({})


.charts {
  width: 100%;
  height: 100%;
}

原因是我把高度用百分数%表示，改为px就出现了。

如果容器的height/width属性设置为百分比的形式，那么echarts就会warning，且不能正常的生成图表。所以div容器的高度宽度必须指定为px。

如果非要用100%，怎么实现？

<div class="charts" ref="charts" style="height:100%;width:100%;"></div>

有警告，但是图片显示了。