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' // 你想跳到的页面地址
          })
        })
      })
    }

暂时先写这么多，后期再补充