Vue开发结合element-ui的一些常见问题

解决 console.log 报错问题

// 在package.json 里面 写入
"eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "@vue/standard"
    ],
    "rules": {
      "no-console": "off" 
    },
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },

解决babel.config.js 引入路由懒加载和element.js 问题

// npm install babel-plugin-component -D //需要安装这个插件
module.exports = {
  presets: [
    "@vue/app",
  ],
  "plugins": [
    [
      "component", 
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      },
      "@babel/plugin-syntax-dynamic-import"
    ],
  ]
}

input框后面带单位

<el-input
  size="mini"
   placeholder="请输入1-100"
   style="width: 70px;"
   v-model="BYinzi.ndviMin"
   class="quJInput"
 >
   <span
     slot="suffix"
     style=" position: relative; top: 20%; right: 50%;color: #000; display: table-cell;white-space: nowrap; padding: 5px 2px;"
   >%</span>
 </el-input>

el-table 中解决背景颜色改变问题

  >>> .el-tabs__item.is-top {
    color: #ffffff;
  }
  >>> .el-tabs__item.is-active {
    color: #409eff;
  }
  >>> .el-table {
    background-color: transparent !important;
    td {
      background-color: transparent !important;
      color: #ffffff !important;
      border-bottom: 1px solid transparent !important;
    }
  }
  >>> .el-table__expanded-cell {
    background-color: transparent;
  }
  >>> .el-table th {
    background-color: transparent !important;
    color: #ffffff !important;
    border-right: 1px solid transparent !important;
    border-bottom: 1px solid transparent !important;
  }
  >>> .el-table tr {
    background-color: transparent !important;
  }
  >>> .el-input--small .el-input__inner {
    background-color: transparent !important;
    color: #fff;
  }

/* 解决分页的样式问题 */
 /*设置xx条/页的框的颜色*/
  >>> .el-select .el-input.is-focus .el-input__inner,
  >>> .el-pagination__sizes .el-input .el-input__inner:hover,
  >>> .el-select .el-input__inner {
    background-color: transparent !important;
  }
  >>> .el-select .el-input.is-focus .el-input__inner,
  >>> .el-pagination__sizes .el-input .el-input__inner:hover,
  >>> .el-select .el-input__inner:focus {
    color: #ccc;
    background-color: transparent !important;
  }
  /*设置当前页码的样式，及鼠标移上其他页码时的样式,以及左右箭头鼠标移上的样式*/
  >>> .el-pager li.active,
  >>> .el-pager li,
  >>> .el-pagination button {
    background-color: transparent !important;
    border: 1px solid #ccc;
    color: #ccc !important;
  }
  >>> .el-pager li.active,
  >>> .el-pager li:hover,
  >>> .el-pagination button:hover {
    color: #ccc;
    background-color: #18ab8f !important;
  }

效果：
参考链接： 点击跳转

elementUI cascader 选择后自动收起；单选不止点击小圈圈，点击文字也可以

链接

<template>
  <div>
    <el-cascader
      size="small"
      :options="regionTreeList"
      ref="example"
      popper-class="example"
      :props="{
                  checkStrictly: true,
                  emitPath: false,
                  value: 'regionCode',
                  label: 'name'
                }"
      v-model="formLabelAlign.administrativeDivision"
      placeholder="请选择政区"
      clearable
      :show-all-levels="false"
      @change="exampleChange"
    ></el-cascader>
  </div>
</template>

<script>
import monitoringAPI from "@/api/index.js";

export default {
  name: "",
  data() {
    return {
      regionTreeList: [], // 行政区划
      formLabelAlign: {
        soilErosionModel: "1",
        administrativeDivision: ""
      }, // 成果复核数据
      checkedRegionCode: ""
    };
  },
  created() {
    this.getRegionByLvlList();
  },
  mounted() {},

  methods: {
    exampleChange(e) {
      this.checkedRegionCode = e;
      // 目的是选择之后将下拉界面收起
      this.$refs.example.toggleDropDownVisible();
      console.log(this.checkedRegionCode, "this.checkedRegionCode");
    },
    // 获取行政级别(新)
    getRegionByLvlList() {
      const param = {
        addvcd: sessionStorage.getItem("regionCode")
        // addvcd: "410000000"
      };
      monitoringAPI.getaddvcd(param).then(res => {
        this.regionTreeList = this.deleteEmpty(res.data.data);
      });
    },
    deleteEmpty(arr) {
      this.setDisabled(arr);
      arr.forEach(element => {
        if (element.children.length !== 0) {
          this.deleteEmpty(element.children);
        } else {
          delete element.children;
        }
      });
      return arr;
    },
    //设置仅第三级（县级）可选
    setDisabled(arr) {
      for (let i in arr) {
        if (arr[i].lvl < 3) {
          arr[i].disabled = true;
        }
      }
    }
  }
};
</script>

<style lang='scss' scoped>
div {
  width: 100%;
  height: 100%;
 /*
	以下样式是为了不止点击文字前的小圈圈进行选择，而是可以点击包括文字整行选择。
*/
  >>> .example .el-cascader-panel .el-radio {
    width: 100%;
    height: 100%;
    z-index: 10;
    position: absolute;
    top: 0px;
    right: 0px;
  }

  >>> .example .el-cascader-panel >>> .el-radio__input {
    margin-top: 10px;
    margin-left: 8px;
  }

  >>> .example .el-cascader-panel >>> .el-cascader-node__postfix {
    top: 10px;
  }
}
</style>

element中table组件内容过长时显示tooltip

show-overflow-tooltip
true：当内容过长被隐藏时显示 tooltip
false：默认值

<el-table-column label="文件路径" prop="filePath" align="center" width="220" show-overflow-tooltip=true>
</el-table-column>

    <el-table-column label="文件路径" prop="filePath" align="center" width="220">
          <template slot-scope="scope">
            <el-popover placement="top-start" title="文件路径" width="250" trigger="hover" >
              <div>{{scope.row.filePath}}</div>
                <span slot="reference">{{ scope.row.filePath.substr(0,30)+'...' }}</span>
            </el-popover>
          </template>
    </el-table-column>

// 或者可以使用class改变它的宽度

// 注意： 样式放的位置。
 .el-tooltip__popper {
    max-width: 200px;
  }

el-table 自定义表头

<el-table-column label="操作" align="left">
   <template slot="header" slot-scope="slot">
     操作
     <el-tooltip class="item" effect="dark" content="内容" placement="top-start">
       <i class="el-icon-question" style="color: #0065FF; fontSize: 15px;"/>
     </el-tooltip>
   </template>
   <template slot-scope="scope">
     查看
   </template>
 </el-table-column>

链接： 原文链接