Element-ui笔记

el-input监听回车键

@keyup.native="事件名"

element-ui侧边栏模板

一级菜单

<el-menu
  :default-active="activeIndex"
  mode="horizontal"
  background-color="#373f41"
  text-color="#fff"
  router
  active-text-color="#ffd04b"
>
  <el-menu-item
    :index="'/' + item.url"
    v-for="item in headerMenu"
    :key="item.id"
    @click="headerSave('/' + item.url)"
    >{ { item.name } }</el-menu-item
  >
</el-menu>

二级菜单

<el-menu
  unique-opened
  :collapse-transition="false"
  router
  :default-active="activePath"
  background-color="#333744"
  text-color="#fff"
  active-text-color="#409FFF"
>
  <!-- 一级菜单  -->
  <el-submenu
    :index="item.id + ''"
    v-for="item in menuList2"
    :key="item.id"
  >
    <!-- 一级菜单的模板区域 -->
    <template slot="title">
      <span>{ { item.name } }</span>
    </template
    <!-- 二级菜单 -->
    <el-menu-item
      :index="'/' + subItem.url"
      v-for="subItem in item.children"
      :key="subItem.id"
      @click="saveNavState('/' + subItem.url)"
    >
      <!-- 导航开启路由模式：将index值作为导航路由-->
      <!-- 二级菜单的模板区域 -->
      <template slot="title">
        <i class="el-icon-menu"></i>
        <span>{ { subItem.name } }</span>
      </template>
    </el-menu-item>
  </el-submenu>
</el-menu>

el-table

初始化

<el-table
  :data="tableData"
  :header-row-style="{
    color: '#696969',
    fontSize: '15px',
    fontWeight: 900,
  }"
  :header-cell-style="{ backgroundColor: '#F5F7FA' }"
  border
>
  <el-table-column type="index"  width="55" label="序号" align="center">
  </el-table-column>
  <el-table-column prop="" label="xxxx" align="center">
  </el-table-column>
</el-table>

自定义索引值

//el-table中绑定index方法
<el-table-column label="序号"
    align="center"
    type="index"
    :index="indexMethod"></el-table-column>

//自定义方法(翻页后连续)
indexMethod (index) {
  if (this.queryInfo.page === 1) {
    return index + 1
  } else {
    return index + 1 + this.queryInfo.limit * (this.queryInfo.page - 1)
  }
},

修改样式

去掉背景色

.el-table, .el-table__expanded-cell {
    background-color: transparent!important;//transparent：透明
}

.el-table th, .el-table tr {
    border: 0!important;
    background-color: transparent!important;
}

去掉边框线

.el-table--border tr,td{
   border: none!important;
}
.el-table::before{
  height:0;
}

修改高亮

.el-table--enable-row-hover .el-table__body tr:hover>td{
  background-color:rgb(0, 12, 46) !important;
}

el-upload上传图片

组件模板

<el-upload action="地址"
    list-type="picture-card"
    name="files"
    :headers="headers"
    ref="uploadRef"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :on-success="handleSuccess"
    :class="{hide:showUpload}"
    :limit="1"
    >
    <i class="el-icon-plus"></i>
     //预览
    <el-dialog :visible.sync="dialogVisible" append-to-body>
    <img width="100%"
         :src="dialogImageUrl"
         alt="">
    </el-dialog>
</el-upload>

钩子函数

//图片预览
handlePreview (file) {
    console.log('图片预览',file)
},
//图片删除
handleRemove (file, fileList) {
    console.log('图片删除',file)
    if (fileList.length < 1) {
        this.showUpload = false
    }
},
//图片上传
handleSuccess (response, file, fileList) {
    console.log('图片上传',file)
    if (fileList.length >= 1) {
        this.showUpload = true
    }
},

达到限制后隐藏添加按钮

.hide .el-upload--picture-card {
  display: none;
}

关闭时清除上传图片

this.$refs.featureUploadRef.clearFiles();

el-select实现全选功能

组件模板

<el-select v-model="formData.id"
        placeholder="请选择"
        style="width:100%"
        filterable
        clearable
        multiple
        collapse-tags
        @remove-tag="removeTag"
        @change="selectAll">
    <el-option v-for="item in selectOpt"
        :key="item.value"
        :label="item.label"
        :value="item.value">
    </el-option>
</el-select>

Data数据

formData:{id:''}
selectOpt: [{ value: '全选', label: '全选' }],
newStaffData: [],
finStaffData: [],

Js方法

removeTag (val) {
  if (val === "全选") {
    this.formData.id = [];
  }
  console.log("removeTag===", this.formData.id);
},
selectAll (val) {
  var end = val[val.length - 1]
  console.log('111===', this.finStaffData, val, this.newStaffData)
  //全选数据再反选使所有清空
  if (this.newStaffData.includes('全选') && !val.includes('全选') && val.length + 1 === this.selectOpt.length) {
    val = []
    this.finStaffData = []
  }
  //当所有数据都选择了使勾选上【全选】
  if (!val.includes('全选') && val.length + 1 === this.selectOpt.length) {
    val.unshift('全选') //在val开头插入【全选】
  } else if (val.includes('全选') && val.length === 1) { //直接勾选【全选】
    val = []
    this.selectOpt.map(item => {
      val.push(item.id)
    })
  } else if (val.includes('全选') && val.length - 1 < this.selectOpt.length && end === '全选') {
    //点击选择其他元素后再选择【全选】
    val = []
    this.selectOpt.map(item => {
      val.push(item.id)
    })
  } else if (val.includes('全选') && val.length - 1 < this.selectOpt.length) {
    //全选后再点击取消掉其他元素
    val = val.filter(item => {
      return item !== '全选'
    })
  }
  // 注意，加上  this.value = val，确保勾选值同步
  this.finStaffData = val
  this.newStaffData = val
  this.formData.id = this.finStaffData
}

返回提示

goBack() {
  this.$confirm("确认返回?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      this.$notify({
        type: "success",
        message: "返回成功!",
        position: "bottom-right",
        duration: 3000,
      });
      console.log("back");
      this.$router.push("/xxxx");
    })
    .catch(() => {
      this.$notify({
        type: "info",
        message: "已取消",
        position: "bottom-right",
        duration: 3000,
      });
    });
},

el-table导出Excel表格

//1.安装依赖 
npm install --save xlsx file-saver
//2.给table添加一个id
//3.引入导出Excel表格依赖
  import FileSaver from "file-saver";
  import XLSX from "xlsx";
//4.定义导出Excel表格事件
  exportExcel() {
  /* 从表生成工作簿对象 */
  var wb = XLSX.utils.table_to_book(document.querySelector("#out-table"));
  /* 获取二进制字符串作为输出 */
  var wbout = XLSX.write(wb, {
      bookType: "xlsx",
      bookSST: true,
      type: "array"
  });
  try {
      FileSaver.saveAs(
      //Blob 对象表示一个不可变、原始数据的类文件对象。
      //Blob 表示的不一定是JavaScript原生格式的数据。
      //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
      //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
      new Blob([wbout], { type: "application/octet-stream" }),
      //设置导出文件名称
      "sheetjs.xlsx"
      );
    } catch (e) {
      if (typeof console !== "undefined") console.log(e, wbout);
    }
    return wbout;
  }

tips:如果数据中带有‘100%’等数据，不想被处理为小数，加{raw:true}即可
var wb = XLSX.utils.table_to_book(document.querySelector("#out-table"),{raw:true});

el-dialog组件模板

<template>
  <div>
    <el-dialog
      title="xxxx"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      @close="dialogClosed"
      width="25%"
      center
    >
      <el-divider></el-divider>
      <el-form
        :model="addForm"
        :rules="addFormRules"
        size="small"
        ref="addFormRef"
        label-width="120px"
      >
        <el-form-item prop="aaa" label="xxxx：">
          <el-input
            v-model="addForm.aaa"
            placeholder=""
            style="width: 90%"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button
          type="primary"
          size="small"
          style="margin-right: 40px"
          @click="add"
          >保 存</el-button
        >
        <el-button
          size="small"
          style="margin-left: 40px"
          @click="dialogVisible = false"
          >取 消</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: ["isShowAdd"],
  data() {
    return {
      dialogVisible: this.isShowAdd,

      addForm: {},
      addFormRules: {},
    };
  },
  created() {},
  mounted() {},
  watch: {
    isShowAdd: function (val) {
      console.log("isShowAdd", val);
      this.dialogVisible = val;
    },
  },
  methods: {
    //点击阴影关闭Dialog
    handleClose(done) {
      this.$confirm("确认关闭？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    add() {
      console.log("新增", this.addForm);
      this.dialogVisible = false;
    },
    dialogClosed() {
      this.$emit("addDialogClosed", this.dialogVisible);
      this.$refs.addFormRef.resetFields();
    },
  },
};
</script>
<style lang="less" scoped>
</style>