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;
  }