element ui 基本操作

系列文章目录

提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加
例如：第一章 Python 机器学习入门之pandas的使用

---

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、表单操作

1. 重置数据

描述：在vue开放中我们会遇到一个页面或者一个弹窗让他恢复到原始数据的情况，如果数据不多我们可以重设赋值一下，但数据较多的情况下会比较麻烦，这时候可以用到

1. this.$options.data() 这个是vue原始的数据，就是你页面刚加载时的data

2. this.$data 这个是现在阶段的vue数据，就是你改变data的数据

//初始化的数据
data() {
    return {
      formInline: {
        status: '',
        result: '',
      },
      status: null,
      isShow: false,
    }
  },

示例：这一句功能很强大，相当于一旦调用这个方法，你当前页面的data中的属性值都会恢复到原始值,无论你对这个data中的属性做了啥子操作

// 重置数据
    resetData () {
      Object.assign(this.$data, this.$options.data())
    },

示例：如果只想恢复个别值，比如formInline

this.formInline =  this.$options.data.call(this).formInline

或者：

data() {
  return {
    listQuery: {
        page: 1,
        size: 10,
        school_id: '',
        organization_id: '',
        term_id: '',
        class_name: '',
        teacher_name: ''
      }
  }
}

// 使用此方法初始化数据数据
methods: {
  clean() {
    Object.assign(this.$data.listQuery, this.$options.data().listQuery)
  }
}

或者：

// 如果只想让一个数据恢复到以前
this.listQuery= this.$options.data().listQuery

又或者 form 表单的 重置方法：

/* 重置form表单 */
resetForm(formName) {
  /*
    this.dialogForm2={
      type:'',
      remark:''
    }*/
    this.$refs[formName].resetFields();
  }

2.扩展（合并对象）

Object.assign(target, …sources) 方法还可以用来合并对象：

const o1 = { a: 1 };
const o2 = { b: 2 };
const o3 = { c: 3 };
const obj = Object.assign(o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(o1); // { a: 1, b: 2, c: 3 }, 注意目标对象自身也会改变。

如果对象中含有相同属性，取最后一个属性：

const o1 = { a: 1, b: 1, c: 1 };
const o2 = { b: 2, c: 2 };
const o3 = { c: 3 };
const obj = Object.assign({}, o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 } 属性取最后一个对象的属性

二、弹框

1.弹出图片

1.1 点击空白关闭图片预览功能：

/* 点击空白关闭图片预览功能 */
 <el-image
         style="width: 80%; height: 30px;"
         :src="scope.row.imgUrl"
         @click.stop="handleClickItem"
         :preview-src-list="[scope.row.imgUrl]">
<!--                    <div slot="error" style="font-size: 25px;">-->
<!--                      <i class="el-icon-picture-outline"></i>-->
<!--                    </div>-->
     </el-image>
handleClickItem(){
  this.$nextTick(()=>{
    let domImageMask = document.querySelector(".el-image-viewer__mask");  // 获取遮罩层dom
    if (!domImageMask) {
      return;
    }
    domImageMask.addEventListener("click", () => {
      // 点击遮罩层时调用关闭按钮的 click 事件
      document.querySelector(".el-image-viewer__close").click();
    });
  })
},

2.读入数据

代码如下（示例）：

data = pd.read_csv(
    'https://labfile.oss.aliyuncs.com/courses/1283/adult.data.csv')
print(data.head())

该处使用的url网络请求的数据。

3.弹框可移动

3.1 创建一个js文件

import Vue from 'vue';
 
// v-dialogDrag: 弹窗拖拽属性
Vue.directive('dialogDrag', {
  bind(el, binding, vnode, oldVnode) {
    const dialogHeaderEl = el.querySelector('.el-dialog__header');
    const dragDom = el.querySelector('.el-dialog');
    //dialogHeaderEl.style.cursor = 'move';
    dialogHeaderEl.style.cssText += ';cursor:move;'
    dragDom.style.cssText += ';top:0px;'
 
    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
    const sty = (function () {
      if (window.document.currentStyle) {
        return (dom, attr) => dom.currentStyle[attr];
      } else {
        return (dom, attr) => getComputedStyle(dom, false)[attr];
      }
    })()
 
    dialogHeaderEl.onmousedown = (e) => {
      // 鼠标按下，计算当前元素距离可视区的距离
      const disX = e.clientX - dialogHeaderEl.offsetLeft;
      const disY = e.clientY - dialogHeaderEl.offsetTop;
 
      const screenWidth = document.body.clientWidth; // body当前宽度
      const screenHeight = document.documentElement.clientHeight; // 可见区域高度(应为body高度，可某些环境下无法获取) 
 
      const dragDomWidth = dragDom.offsetWidth; // 对话框宽度
      const dragDomheight = dragDom.offsetHeight; // 对话框高度
 
      const minDragDomLeft = dragDom.offsetLeft;
      const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth;
 
      const minDragDomTop = dragDom.offsetTop;
      const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight;
 
 
      // 获取到的值带px 正则匹配替换
      let styL = sty(dragDom, 'left');
      let styT = sty(dragDom, 'top');
 
      // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
      if (styL.includes('%')) {
        styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100);
        styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100);
      } else {
        styL = +styL.replace(/\px/g, '');
        styT = +styT.replace(/\px/g, '');
      };
 
      document.onmousemove = function (e) {
        // 通过事件委托，计算移动的距离 
        let left = e.clientX - disX;
        let top = e.clientY - disY;
 
        // 边界处理
        if (-(left) > minDragDomLeft) {
          left = -(minDragDomLeft);
        } else if (left > maxDragDomLeft) {
          left = maxDragDomLeft;
        }
 
        if (-(top) > minDragDomTop) {
          top = -(minDragDomTop);
        } else if (top > maxDragDomTop) {
          top = maxDragDomTop;
        }
 
        // 移动当前元素  
        dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`;
      };
 
      document.onmouseup = function (e) {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    }
  }
})

3.2 创建一个js文件将文件引入你的 main.js内即可

import '../src/api/directives.js';

3.3 在你的dialog对话框内写入v-dialogDrag指令就可以拖拽了

// 在你的dialog对话框内写入v-dialogDrag指令就可以拖拽了
<el-dialog
    v-dialogDrag
    :title="BomTitle"
    :visible.sync="dialogVisible"
    width="40%"
    :before-close="handleClose"
  >
</el-dialog>

三. Table 表格

1. 分页

1.1 记录保存分页选中的 Check 选项：

源链接: https://blog.csdn.net/lxy869718069/article/details/111196020

<template>
	<div class='xxx-box'>
	    <!-- 表格 -->
	    <el-table
	      :data="operationList"
	      ref="mListTable"
	      @select="changeSelect"
	      @select-all="selectAll"
	    >
    	......
    	</el-table>
	    <!-- 分页 -->
	    <div class="all-el-page">
	      <div class="all-check">
	        <span class="all-check-span"
	          >已选择{{ saveCheckList.length }}条数据</span
	        >
	        <el-checkbox v-model="pageChecked" @change="checkAll">全选</el-checkbox>
	      </div>
	      <el-pagination
	        @size-change="handleSizeChange"
	        @current-change="handleCurrentChange"
	        :current-page="queryParams.page"
	        :page-size="queryParams.size"
	        layout="total, prev, pager, next, jumper"
	        :total="total"
	      >
	      </el-pagination>
	    </div>
	</div>
</template>
<script>
export default {
	data(){
		return{
			pageChecked:false, //全选切换状态
			// 保存起来的选择项
      		saveCheckList: [],
      		// 分页
      		queryParams: {
		        page: 1,
		        size: 10,
			},
			// 分页总数
			total:0,
		}
	},
	methods:{
		// 当页勾选以及取消
	    changeSelect(selection, row) {
	      console.log("selection", selection);
	      console.log("row", row);
	      // 从保存项saveCheckList里面寻找,如果找到了row则删除，如果没找到则添加
	      let fitemIndex = this.saveCheckList.findIndex((item) => {
	        return item.ebIds == row.ebIds;
	      });
	      if (fitemIndex < 0) {
	        this.saveCheckList.push(row);
	      } else {
	        this.saveCheckList.splice(fitemIndex, 1);
	      }
	      console.log("this.saveCheckList", this.saveCheckList);
	    },
	    // 表格全选内容
	    selectAll(val) {
	      console.log("selectAll", val);
	      // 如果为空，则为清除选项状态，此时将table中的所有内容都从saveCheckList移除
	      if (val && val.length == 0) {
	        this.operationList.forEach((row) => {
	          // 从保存项saveCheckList里面寻找,如果找到了row则删除，如果没找到则添加
	          let fitemIndex = this.saveCheckList.findIndex((item) => {
	            return item.ebIds == row.ebIds;
	          });
	          // 找到了就删除掉
	          if (fitemIndex >= 0) {
	            this.saveCheckList.splice(fitemIndex, 1);
	          }
	        });
	      } else if (val && val.length != 0 && this.saveCheckList.length != 0) {
	        // 如果不为空,且this.saveCheckList也不为空则从val里面找
	        val.forEach((row) => {
	          // 从保存项saveCheckList里面寻找,如果找到了row则删除，如果没找到则添加
	          let fitemIndex = this.saveCheckList.findIndex((item) => {
	            return item.ebIds == row.ebIds;
	          });
	          // 没找到就push进去
	          if (fitemIndex < 0) {
	            this.saveCheckList.push(row);
	          }
	        });
	      } else if (val && val.length != 0 && this.saveCheckList.length == 0) {
	        val.forEach((row) => {
	          this.saveCheckList.push(row);
	        });
	      }
	    },
	    // 全选按钮
	    checkAll() {
	      // 全选操作
	      if (this.pageChecked) {
	        // 调用接口查询所有的列表数据并且保存起来
	        let param = {
	          page: 0,
	          size: 1000000,
	          ebId: this.queryParams.ebId,
	          ebActivated: this.queryParams.ebActivated,
	          ebValid: this.queryParams.ebValid,
	          ebBatch: this.queryParams.ebBatch,
	          ebmType: this.queryParams.ebmType,
	          ebModelName: this.queryParams.ebModelName,
	          ebSensorStatus: this.queryParams.ebSensorStatus,
	          ebLeaveStatus: this.queryParams.ebLeaveStatus,
	        };
	        emergencyBaggetList(param).then((response) => {
	          if (response.status == "0") {
	            this.saveCheckList = response.data.content;
	            console.log("this.saveCheckList", this.saveCheckList);
	            // 将当前的页的所有内容加上勾选状态
	            this.$nextTick(() => {
	              this.$refs["mListTable"].clearSelection();
	              this.$refs["mListTable"].toggleAllSelection();
	            });
	          }
	        });
	      } else {
	        // 取消全选，当前所有选择项清空
	        this.saveCheckList = [];
	        // 将当前的页的所有内容取消勾选状态
	        this.$nextTick(() => {
	          this.$refs["mListTable"].clearSelection();
	        });
	      }
	    },
	    // 分页切换时准备表格的选中状态 -- 这个内容必须放在表格数据赋值之后--()
	    // tableList 为当前表格的数据
	    checkPageStatus(tableList) {
	      tableList.forEach((row) => {
	        let findex = this.saveCheckList.findIndex((item) => {
	          return item.ebIds == row.ebIds;
	        });
	        console.log("checkPageStatus", findex);
	        if (findex >= 0) {
	          this.$nextTick(() => {
	            this.$refs["mListTable"].toggleRowSelection(row);
	          });
	        }
	      });
	    },
	    /** 查询列表 */
	    getList() {
	      let param = {
	        page: this.queryParams.page - 1,
	        size: this.queryParams.size
	      };
	      emergencyBaggetList(param).then((response) => {
	        this.operationList = response.data.content;
	        // 准备表格的选中状态
	        this.checkPageStatus(this.operationList);
	        this.total = response.data.totalElements;
	      });
	    },
	    /* 分页 */
	    handleSizeChange(val) {
	      this.queryParams.size = val;
	      this.getList();
	    },
	    /* 分页 */
	    handleCurrentChange(val) {
	      this.queryParams.page = val;
	      this.getList();
	    },
	}
}
</script>

1.2 表格多页序号正确自增代码

<template>
 <el-table :data="tableData">
   <el-table-column type="index" width="50" label="序号" align='center'>
     <template slot-scope="scope">
       <span>{{(pages.page - 1) * pages.size + scope.$index + 1}}</span>
     </template>
   </el-table-column>
 </el-table>
</template>
<script>
export default {
  data() {
    return {
      pages: {
        page: 1,
        size: 10,
        total: 100
      }
    };
  }
}
</script>

1.3 v-if切换不同表格，但内容却出现重复问题

解决方法：通过给每个表格加上不同的key值来区分两个表格，迫使vue不复用这个表格内容
如

// 表格1
<el-table key='a123'>
	<el-table-column
      prop="name"
       label="姓名"
       width="180">
     </el-table-column>
......
</el-table>
// 表格2
<el-table key='b456'>
 	<el-table-column
     prop="name"
       label="姓名"
       width="180">
     </el-table-column>
......
</el-table>

2.element ui 双击表格展示输入框 修改数据

参考链接-1: https://blog.csdn.net/TingLisu/article/details/119646500
参考链接-2: https://www.cnblogs.com/zhige-1/p/11727061.html
参考链接-3: https://blog.csdn.net/u014362204/article/details/89186897
添加 @cell-dblclick=“tableDbEdit” 双击事件

<el-table
    @cell-dblclick="tableDbEdit"
      :data="tableData1"
      max-height="350"
      :row-class-name="tableRowClassName"
      border>
    <el-table-column align="">
      <template slot="header">
        <el-button type="success" size="mini" @click="dialogFormVisible2Show">新增</el-button>
      </template>
      <el-table-column
          align="center"
          type="index"
          fixed
          :index="$indexMethod(0,searchOptions.currentPage,searchOptions.pageSize)"
          label="编号"
          width="80"
      ></el-table-column>
    <el-table-column prop="costPriceNew" label="询后价格" width="120" align="center">
      <template slot-scope="scope">
        <el-link icon="el-icon-edit" type="success" v-if="scope.row.costPriceNew">￥{{ scope.row.costPriceNew }}</el-link>
        <el-link icon="el-icon-edit" type="danger" v-else>无</el-link>
      </template>
    </el-table-column>
  </el-table-column>

添加双击方法

 /* 双击表格触发 */
tableDbEdit(row, column, cell, event) {
  // 判断是否存在input标签
  if(document.getElementById("table-input")){
    return
  }
  if (column.label != "编号"&& column.label=="询后价格") {
    let cellInput = document.createElement("input");
    if (row.costPriceNew==undefined){
      cellInput.value = '0';
    }else {
      cellInput.value = row.costPriceNew;
    }
    cellInput.setAttribute("type", "text");
    cellInput.setAttribute("id", "table-input");
    cellInput.style.width = "80%";
    /*添加监听失去焦点事件*/
    cellInput.addEventListener("blur",function(){
        // 删除input标签
        cell.removeChild(cellInput);
        // 清空 表格下 td标签
        cell.removeChild(cell.getElementsByTagName('div')[0]);
        // 保存修改过的数据
        row.costPriceNew=cellInput.value
        // 创建 document 对象。重新生成创建标签。覆盖td下的所有标签。注：（防止渲染失效）
        let cellInput1 = document.createElement('div');
        cellInput1.setAttribute("class", "cell");
        let cellInput2= document.createElement('a');
        let cellInput3= document.createElement('i');
        let cellInput4= document.createElement('span');
        cellInput2.setAttribute("class", "el-link el-link--success is-underline");
        cellInput3.setAttribute("class", "el-icon-edit");
        cellInput4.setAttribute("class", "el-link--inner");
        cellInput4.innerHTML="￥".concat(cellInput.value);//为节点对象添加内容
        cellInput2.appendChild(cellInput3);//追加
        cellInput2.appendChild(cellInput4);//追加
        cellInput1.appendChild(cellInput2);//追加
        cell.appendChild(cellInput1);
    })
    // 追加input标签
    cell.appendChild(cellInput);
    // 获取input标签焦点
    cellInput.focus()
    // cellInput.onblur = function() {  // 失去焦点后触发
    //   alert(row.index )
    //   cell.removeChild(cellInput);
    //   this.getItem(row.index,cellInput.value);
    //   // event.target.innerHTML = "<el-link icon=\"el-icon-edit\" type=\"success\">"+cellInput.value+"</el-link>";
    // };
  }

四、Upload 文件上传

1.直接使用elementui本身的上传组件进行

原文链接: link

<template>
  <!-- 官方的图片上传修改组件，目的是将上传的文件抛出去，根据适当的需要而进行适当的修改 -->
  <div class="el-upload-box">
    <div class="upload-box">
      <el-upload
        ref="myUpload"
        multiple
        list-type="picture-card"
        :action="'http://10.01.01.01:8800/xx'"
        :data="{ projectType: 1 }"
        :limit="maxLength"
        :file-list="pictureList"
        :before-upload="beforeUpload"
        :on-success="uploadSucess"
        :on-error="uploadError"
        :on-exceed="uploadExceed"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        :class="{ 'upload-disabled': currentFileListLengthDisabled }"
      >
        <!--这个属性可以让按钮消失  -->
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="" />
      </el-dialog>
      <p class="el-upload__tip">
        {{ currentFileListLength }}/{{
          maxLength
        }}张，只能上传jpg/jpeg/png文件，且不超过10M
      </p>
    </div>
    <el-button type="primary" :loading="pictureLoading" @click="uploadPicture"
      >上传按钮</el-button
    >
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 图片上传
      dialogVisible: false, // 图片放大dialog
      dialogImageUrl: "", // 图片放大地址
      currentFileListLength: 0, // 图片数量(用于判断所有图片是否都已成功上传)
      maxLength: 9, // 最大上传几张
      pictureLoading: false, // 图片上传时候loading状态
      // 图片列表
      pictureList: [
        {
          name: "food.jpeg",
          url:
            "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
        }
      ]
    };
  },
  computed: {
    // 上传张数大于限制张数的时候将上传框隐藏
    currentFileListLengthDisabled() {
      if (this.currentFileListLength >= this.maxLength) {
        return true;
      } else {
        return false;
      }
    }
  },
  created() {
    console.log(this.$store.state.fileUploadUrl);
    // 进入之前就需要图片的长度（在给pictureList赋值之后就需要进行长度判断）
    this.currentFileListLength = this.pictureList.length;
  },
  methods: {
    // 上传之前
    beforeUpload(file) {
      this.pictureLoading = true; // 按钮加载状态打开
      this.currentFileListLength = this.pictureList.length; // 当前图片长度
      // 格式、大小限制
      const isJPG =
        file.type === "image/jpeg" ||
        file.type === "image/png" ||
        file.type === "image/jpg";
      const isLt = file.size / 1024 / 1024 < 10; // 大小控制 10 为 10M
      if (!isJPG) {
        this.$message.error("只能上传 JPG / PNG / JPEG 格式图片!");
      }
      if (!isLt) {
        this.$message.error("上传图片大小不能超过 10MB!");
      }
      return isJPG && isLt;
    },
    // 上传成功
    uploadSucess(response, file, fileList) {
      this.pictureList = fileList;
      if (response) {
        // 上传成功一次就增加一张，直到上传完毕
        ++this.currentFileListLength;
        if (this.currentFileListLength === fileList.length) {
          this.pictureLoading = false;
        }
      }
    },
    // 上传失败
    uploadError(err) {
      if (err) {
        this.pictureLoading = false;
        this.$message.error("图片上传失败！");
      }
    },
    // 图片超过限制limit=""
    uploadExceed() {
      this.$message.warning("一次最多只可上传" + this.maxLength + "张图片");
    },
    // 点击图片删除图标
    handleRemove(file) {
      this.pictureLoading = false;
      // 注意：这里删除的字段需要根据实际情况来决定
      this.pictureList = this.pictureList.filter(item => item.url !== file.url); // 删除时候过滤掉被删除的内容
      this.currentFileListLength = this.pictureList.length;
    },
    // 点击图片放大图标
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 上传按钮
    uploadPicture() {
      console.log("图片列表", this.pictureList);
    }
  }
};
</script>
<style lang="scss">
.el-upload-box {
  .upload-box {
    .upload-disabled {
      display: none !important;
    }
  }
}
</style>

五、单选和复选框

1. 复选框

1.1 使用el-checkbox-group复选框进行单选框操作

页面使用v-model绑定 size就是等比例缩小放大，v-ror循环应该看的懂。重要的是@chage

<el-checkbox-group v-model="checked" size="medium">
	<el-checkbox-button v-for="city in cities" :label="city" :key="city" @change="checkbox(city)">{{ city }}</el-checkbox-button>
</el-checkbox-group>

  export default {
    data () {
      return {
        checked: ['上海'],//不能为null，必须要有值
        cities: ['上海', '北京', '广州', '深圳'];
      };
    },
    methods: {
    	checkbox(city) {
    	  this.checked = [city]
    	 // 或-1 this.checked = this.checked[1]
	     // 或-2 this.checked = this.checked.includes(city) ? [city] : [];
	    },
	}
  }

六、功能

1. vue数组去重

1.1 简单的数组进行去重

对于简单的数组进行去重，可以使用Set集合，基本上可以对所有数据类型进行去重

test() {
      const arr = [true, 1, 'str', 's', 2, false, true, {}, [], function() {}, {}, [1], [2], { obj: 1 }, 2, 'str']
      const qc = [...new Set(arr)]
      console.log('qc')
      console.log(qc)
    }

1.2 对象数组去重

对象数组去重，可以使用Map集合，通过对象内的某个属性进行去重

test() {
      const arr = [
        {
          name: '张三',
          age: 22
        },
        {
          name: '李四',
          age: 22
        },
        {
          name: '张三',
          age: 23
        }
      ]
      const map = new Map()
      const qc = arr.filter(key => !map.has(key.name) && map.set(key.name, 1)) // 这里对name属性进行去重
      console.log('qc')
      console.log(qc)
    }

2. vue日期处理

链接: 日期处理函数【 Moment.js 】

// vue
<el-col :span="6" style="position: absolute;left: 80%"  v-for="(item,index) in leaveStartTime">
  <el-tag type="primary" effect="dark"  size="mini" v-if="momentObj(data.day).format('YYYY-MM-DD')>=momentObj(item.split(';')[1]).format('YYYY-MM-DD') && momentObj(data.day).format('YYYY-MM-DD') <= momentObj(leaveEndTime[index].split(';')[1]).format('YYYY-MM-DD')">
    {{item.split(";")[0]}}
  </el-tag>
</el-col>
// JS
export default {
    name: 'personnel-work-matter',
    data() {
      return {
        momentObj:null,
        },
      created() {
	      const moment = require('moment');
	      this.momentObj=moment
      }

3. 组件

1. 弹框组件

1.页面A:

<template>
	<div class="page-container">
		<span @click="examineBtn = true">弹框</span>
		<el-dialog title="提示" :visible.sync="examineBtn" width="60%">
			// 组件
	      <recordsDetail ref="msgBtn"></recordsDetail>
	       // 页脚
	      <span slot="footer" class="dialog-footer">
	            <el-button @click="examineBtn = false">取 消</el-button>
	            <el-button type="primary" @click="examineBtn = false">确 定</el-button>
	      </span>
    	</el-dialog>
	</div>
</template>	
<script>
import { mapGetters } from 'vuex'
import moment from 'moment'//导入日期处理文件
import recordsDetail from "./页面B"; //导入组件 页面B

export default {
    name: 'personnel-work-matter',
    data() {
      return {
        examineBtn:false,
      },
    },
    components: {
      recordsDetail, //自定义的标签
    },
}
</script>

2.页面B:

<template>
	<div class="page-container">
    <template>
      <div id="chartColumn" style="width: 100%; height: 400px;">
      </div>
    </template>
	</div>
</template>
<script>
import echarts from 'echarts'

export default {
  data(){
    return {
      chartColumn: null
    }
  },
  mounted() {
    this.drawLine(); // 图表展示功能
  },
  methods: {
    drawLine(){  // 图表展示功能
      var app = {};
      this.chartColumn = echarts.init(document.getElementById('chartColumn'));
      app.config = {
        rotate: 90,
        align: 'left',
        verticalAlign: 'middle',
        position: 'insideBottom',
        distance: 15,
      };
      const labelOption = {
        show: true,
        position: app.config.position,
        distance: app.config.distance,
        align: app.config.align,
        verticalAlign: app.config.verticalAlign,
        rotate: app.config.rotate,
        formatter: '{c}  {name|{a}}',
        fontSize: 16,
        rich: {
          name: {}
        }
      };
      this.chartColumn.setOption({
        color: [  // 设置主题颜色
            "#3fb1e3",
            "#6be6c1",
            "#fac858",
            "#a0a7e6",
            "#c4ebad",
            "#96dee8"
        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['Forest', 'Steppe', 'Desert', 'Wetland']
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar', 'stack'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        xAxis: [
          {
            type: 'category',
            axisTick: { show: false },
            data: ['总计划', '完成计划', '剩余计划']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'Forest',
            type: 'bar',
            barGap: 0,
            label: labelOption,
            emphasis: {
              focus: 'series'
            },
            data: [320, 332, 301, 334, 390]
          },
          {
            name: 'Steppe',
            type: 'bar',
            label: labelOption,
            emphasis: {
              focus: 'series'
            },
            data: [220, 182, 191, 234, 290]
          },
          {
            name: 'Desert',
            type: 'bar',
            label: labelOption,
            emphasis: {
              focus: 'series'
            },
            data: [150, 232, 201, 154, 190]
          }
        ]
      });
    }
  }
}
</script>

2. 组件传参

2. 1 子组 props 接收数组和对象

export default {
	props: {
		//数组
	    DepartmentDeptList: {
	      type: Array,
	      default: () => []
	    },
	   //对象
	    CommentResultID: {
	      type: Object,
	      default () {
	        return {}
	      }
	    },
	}
}

4. 标签

1.VUE标签中定义变量

使用 :data 绑定 （ this_day ）变量

<div class="content" v-if="tableData && tableData['onDutyTime_1']&&tableData['onDutyTime_1'][(parseInt(data.day.split('-')[2])-1)]" :data="this_day=(parseInt(data.day.split('-')[2])-1)">
 <el-tag v-if="tableData['attend_result'][this_day]['value'].includes('迟到')" type="warning" effect="dark"  size="mini">迟到</el-tag>
</div>                    

5. 监听VUE data 属性字段

监听一下对象 formCode 中 属性 application 的变化：

<script>
export default{
    data(){
        return{
            formCode:{
                application:"",
                oldcode:"",
                newcode:""
            }
        ｝
    ｝
｝
</script>

newVal,oldVal （新数据和旧数据）

watch:{
　　'formCode.application'(newVal,oldVal){
    　　if(newVal != oldVal && newVal != ""){
        　　this.vDisable = false;
        　　var appName = newVal.split("-")[0]
        　　this.getVersionData(appName)
    　　}
　　}  
}  

---

6. 数据

1. 小数转为整数

floor：下退 
Math.floor(12.9999) = 12 
ceil：上进
Math.ceil(12.1) = 13; 
round: 四舍五入 
Math.round(12.5) = 13 
Math.round(12.4) = 12
二、小数位数控制
保留到整数：exam = Math.round(exam);
保留一位小数：exam = Math.round(exam * 10) / 10;
保留二位小数：exam = Math.round(exam * 100) / 100;
保留三位小数：exam = Math.round(exam * 1000) /1000;
其它依次类推。

2.负数转换正

//取绝对值
console.log(Math.abs(2.5));
//取绝对值，负数转换成正数
console.log(Math.abs(-2.5));
打印结果: 2.5 2.5
//取绝对值
let a = -20;
// console.log(-1*50);  负数*正=负数 -50
// let b = -1 * a; 与下面的逻辑是等同的，负*负=正数 20
let b = -a;
console.log(b);

打印结果: 20

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。