原创 用戶角色- 權限選擇 樹形表格+選擇框

在最近的項目有個功能是給用戶角色相關的模塊賦予增刪改查的權限原型大體如下 這是產品一開始給的原型,但是每個模塊所擁有的權限不一樣,不一定四個都會有,或者會有別的權限, 網上找尋資料後,根據這個項目進行修改的https://github.c

原创 ie瀏覽器下 登錄框上密碼查看圖標無法點擊問題

如上圖所示 密碼框後的閉眼按鈕鼠標移動上去無法點擊,其他瀏覽器是正常的, 推測是le瀏覽器可能圖層層級不夠 ,在圖標處z-index增大 如下圖即可點擊查看

原创 echarts點擊圖例 數據疊加 多次觸發

echarts的的圖例點擊第一次是正常獲取當前點擊的數據,但是重複點擊獲取的越來越多,即點擊多次觸發。 所以在點擊之前要對加上一個off事件  myChart.off('click') 清楚之前的點擊事件。 myChart.setOpti

原创 使用Dialog時 讓頁面層使用了 JQ插件mCustomScrollbar滾動條固定

JQ插件mCustomScrollbar是讓不同瀏覽器的滾動條樣式能同一。 當有使用Dialog的時候頁面內某些div區域內 使用到了滾動條 那麼Dialog內使用到鼠標滾輪的時候就會和頁面的滾動條衝突。 上圖這種使用到了vue-cro

原创 el-table使用模板插槽無法顯示tooltip 以及 text-overflow:ellipsis 在火狐顯示的問題

el-table中使用show-overflow-tooltip屬性內容過長被隱藏時顯示 tooltip,使用了作用域插槽的模板那麼show-overflow-tooltip設置的顯示tooltip內容只作用到下一級的div內容  使用<

原创 el-input中對輸入進行過濾內容

在項目中有時候要對用戶的輸入內容進行過濾,而不是做校驗。 <el-input v-model="input" @input="e => input = inputMe(e)" placeholder="請輸入內容"> <

原创 在vue項目新增loading

有時候在elementui項目中一個Loading並不滿足需求。所以要額外增加其他的Loading來展示 1 在App.vue中是增加一個transition標籤用來過渡 <transition name="load"> <di

原创 Cascader 級聯選擇器 出現空面板的問題

出現空白麪板是因爲後臺大佬數據是遞歸處理過,最底層的children是個空數組,後臺大佬又去不掉或者做不了處理,說特麻煩,那前端做下就好了。 獲取數據的時候 前端將數據做個遞歸處理,遇到children爲空的時候賦值undefined,

原创 Cascader 級聯選擇器 初顯的一些問題

使用級聯選擇器的時候只顯示最末端的一級,而且後臺也只需要傳遞一個id而不是數組的形式,所以級聯選擇器初始顯示數據時候要進行異步處理。 數據初始化的時候 對options裏的數據進行遍歷,尋找顯示的id所在的層級,定義一個數組,將所在的

原创 ES6 Set的使用, 數組去重 如此簡單

Set是ES6提供新的一種數據結構。類似於數組,但是成員元素的值都是唯一的,沒有重複的值。接收數組作爲參數,所以可以用來用作數組的去重使用 let arr = new Set([[1,1,2,2,2,3,4,4,4,4,5,6]])

原创 表單編輯,關閉對話框 提醒用戶是否保存數據

 在對話框中填寫表單,防止未提交的數據用戶誤操作,點擊關閉造成填寫的大量數據信息清空,需要重新操作一遍,因此關閉的時候對填寫有數據的表單,進行提醒。 點擊打開對話框的時候,將數據保存在sessionStorage,不能保存在data中定

原创 用戶角色- 權限選擇 樹形表格+選擇框 三級菜單

之前弄了個用戶角色權限的表格,但是後面 又增加了一個需要三級的新需求,*******,所以對組件進行了新的修改 界面完整如下 這是搭建的demo 設備管理下有設備1設備2兩個模塊設備1擁有增刪改的權限,設備2下擁有兩個模塊設備2-1設備2

原创 vue-amap 高德地圖定位 點擊獲取經緯度和具體地址的使用

官方文檔地址: 點這裏!!   經緯度獲取只要通過點擊事件就可以通過e.lnglat來獲取,然後就是插件Geocoder使用了。在main.js中initAMapApiLoader中寫入:AMap.Geocoder,注意 官方文檔中有提

原创 表格的整列複製,對數據批量修改

最近的項目上有個需求是將一個表格中的input數據修改了某一個值,該列之後的值修改修改爲一樣,從而多對數據的批量編輯   正常來做是通過點擊事件cell-click點擊來確定在那一列的column和id,然後對數據進行遍歷修改即可。 但

原创 高德地圖 vue-amap 在點座標上方顯示該點的信息

如圖: 在座標點上方顯示該點的一些信息,使用el-amap-text組件, 該組件需要位於el-amap-marker之下,在maker屬性中增加text和offset text是顯示的文字,offset是調整文本框出現位置的偏移量