vue-element-admin 爬坑記錄

公司大佬整理了一份原始版本，根據公司業務需求二次開發vue-element-admin

也是剛入這個坑，認知還比較淺顯，若有所出入，還望批評指正

整理一份項目中用到，也算累計經驗值吧

最好自己下載項目，每個模塊點點

個人覺得這幾塊要好好看看，畢竟路由權限接口那塊可以說常用，而這些不常用你可能會忽略

路由相關

現在沒有管權限的問題，只是把用到的路由分模塊導入原配置

src/router/index

# constantRoutes  這裏存放的是基礎路由

import xxxRouter from './modules/xxxx'

export const asyncRoutes = [

  /** when your routing map is too long, you can split it into small modules **/
  xxxRouter 
  // 404 page must be placed at the end !!!
  { path: '*', redirect: '/404', hidden: true }
]

其實最終會通過store/moudels/permission.js 權限篩選返回頁面

還有些路由，不需要左側導航顯示 路由配置時 hidden: true,

還有組件定製的tab顯示欄，可以刪除

   meta: { title: '店鋪管理', breadcrumb: false },

城市三級聯動

有大佬自己封裝了（內置area.json），可以直接拿過來用，如果你們需要定製化就過吧

npm install v-distpicker

// 使用

   <v-distpicker province="江蘇省" city="蘇州市" area="相城區" @selected="onSelected"></v-distpicker>

    onSelected(data) {  //  address 字段自己在data中聲明  內置區域code字段可以做後端表數據關聯
      this.address.province = data.province.value;
      this.address.city = data.city.value;
      this.address.county = data.area.value;
    },

rich-text （後期我才發現它自帶了一個牛逼的編輯器 Tinymce，所以這個可以不看了，若只想做個簡易版，可以入手）

隨便說一句 Tinymce 漢化

vue-quill-editor

npm install vue-quill-editor quill

// 使用

<template>
  <div class="edit_container">
    <quill-editor
      v-model="content"
      ref="myQuillEditor"
      class="editorWarp"
      :options="editorOption"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @change="onEditorChange($event)"
    ></quill-editor>
    
      <el-button type="success" @click="submitData()">提交</el-button>
    
  </div>
</template>

<script>
import { quillEditor } from "vue-quill-editor"; 
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

export default {
  name: "richText",
  components: {
    quillEditor
  },
  data() {
    return {
      content: "",
      str: "",
      editorOption: {},
      name
    };
  },
  methods: {
    onEditorReady(editor) {
      // 準備編輯器
    },
    onEditorBlur() {}, // 失去焦點事件
    onEditorFocus() {}, // 獲得焦點事件
    onEditorChange() {}, // 內容改變事件

    submitData() {
    }
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill;
    }
  }
};
</script>
<style lang="scss">
.ql-container {
  min-height: 500px;
}
</style>

el-select 綁定對象值

el-tabel 序號

<el-table-column
        label="序號"
        type="index"
        width="50"
        align="center">
    <template scope="scope">
        <span>{{(page - 1) * pageSize + scope.$index + 1}}</span>
        // page 當前頁 pageSize 頁面容量
    </template>
</el-table-column>

 // 最好在el-table加上v-loading 你懂得 序號能及時更新，防止請求數據滯後

el-table 樹形結構

<template>
  <div>
    <el-table
      ref="refTable"
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      @row-click="clickTable"
    >
      <el-table-column
        v-for="(item,index) in tableList"
        :key="index"
        :label="item.label"
        :prop="item.prop"
        :align="item.position"
      />
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click.native.stop="addItem(scope.row)"
          >添加</el-button>
          <el-button
            type="primary"
            size="mini"
            @click.native.stop="editItem(scope.row)"
          >編輯</el-button>
          <el-button
            type="text"
            size="small"
            @click.native.stop="deleteItem(scope.row)"
          >刪除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableList: [
        {
          label: '名稱',
          prop: 'name',
          position: 'left'
        },
        {
          label: '描述',
          prop: 'description',
          position: 'center'
        }
      ],
      tableData: [
        {
          id: '1',
          name: 'HTML',
          description: 'HTML是世界上最好的編程語言',
          children: [
            {
              id: '1-1',
              name: 'HTML-1',
              description: 'HTML是世界上最好的編程語言',
              children: [
                {
                  id: '1-1-1',
                  name: 'HTML-1-1',
                  description: 'HTML是世界上最好的編程語言'
                }
              ]
            }
          ]
        },
        {
          id: '2',
          name: 'CSS',
          description: 'CSS是世界上最好的編程語言',
          children: []
        },

        {
          id: '3',
          name: 'JAVASCRIPT',
          description: 'JAVASCRIPT是世界上最好的編程語言',
          children: [
            {
              id: '3-1',
              name: 'JAVASCRIPT',
              description: 'JAVASCRIPT是世界上最好的編程語言'
            },
            {
              id: '3-1-1',
              name: 'JAVASCRIPT',
              description: 'JAVASCRIPT是世界上最好的編程語言'
            }
          ]
        }
      ]
    }
  },
  methods: {
    clickTable(row, column, e) {
      this.$refs.refTable.toggleRowExpansion(row)
      console.log(row, column, e)
    },
    addItem(item) {
      console.log(item)
    },
    editItem(item) {
      console.log(item)
    },
    deleteItem(item) {
      console.log(item)
    }

  }
}
</script>

<style>
</style>

當然我看見比較好的table插件 檢驗增刪改 vxe-table 發現新大陸

在 Vue Element UI 中 el-tabel 導出excel

後端提供接口,前端傳遞參數導出

記得面向百度編程

// 導出Excel公用方法
import axios from "axios"

export function exportMethod(data) {
    axios({
        method: 'get',   // 這邊方法，參數傳遞 以個人實際項目爲準
        url: `${data.url}`,
        params:{ params: data.params}
        responseType: 'blob'
    }).then((res) => {
        const link = document.createElement('a')
        let blob = new Blob([res.data], {type: 'application/vnd.ms-excel'})
        link.style.display = 'none'
        link.href = URL.createObjectURL(blob)
 
        // link.download = res.headers['content-disposition'] //下載後文件名
        link.download = data.fileName //下載的文件名
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
    }).catch(error => {
        console.log(error)
    })
}

<template>
	<el-button @click="exportExcel">導出表格</el-button>
</template>

import { exportMethod } from "../../utils/exportExcel"

    exportExcel(){
      let obj ={
        method:"get",
        url:`xxxxx`,
        params:xxxx,
        fileName: "xxxx.xls"
      }
      exportMethod(obj)
    },

DropDown組件使用時，子選項無法綁定事件的處理

    <el-dropdown-menu>
        <el-dropdown-item @click.native="clickEvent">點擊一下</el-dropdown-item>   // native 
    </el-dropdown-menu>

checkbox

搭配table,有時候需要三級運算來區別不同狀態，checkbox v-model 不支持直接寫

      <el-table-column align="center" label="是否安全">
        <template slot-scope="scope">
          <el-checkbox :checked="scope.row.status==1 ? true : false"></el-checkbox>
        </template>
      </el-table-column>

水波紋按鈕

    <el-button v-waves type="primary">
      水波紋按鈕
    </el-button>

	import waves from '@/directive/waves'
    directives: { waves },

頁面關閉

我們新開頁面，比如 編輯 / 添加頁面，操作成功不希望頁面繼續保留當前

    closeCurrentTab() {
      this.$store.dispatch('tagsView/delView', this.$route).then(() => {
        this.$nextTick(() => {
          this.$router.replace({
            path: 'xxxx' // 你想跳到的頁面地址
          })
        })
      })
    }

暫時先寫這麼多，後期再補充