Vue element-ui之神坑

Vue element-ui之神坑

1.关于更改input样式

更改input标签样式 from表单下的input 使用/deep/
  .el-form /deep/ .el-input__inner {
    width: 149px;
    height: 32px;
  }

下载element-ui

运用vue ui
插件 添加插件
vue-cli-plugin-element

2.更改日期input

/deep/ .el-date-editor {
    width: 149px;
    height: 32px;
  }

3.更改表头

stripe隔行深色
:header-cell-style="getRowClass"   奇数行深色

        getRowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex % 3 == 0) {
        return 'background:rgb(250,250,250)'
      } else {
        return ''
      }
    },

4.表格居中

align:center

5.第一行表格宽度设置

/deep/ .el-table__header-wrapper {
  width: 600px !important;
  overflow: hidden;
}

6.栅格布局

   <el-row>
            <el-col :span="11">
              <el-date-picker type="date" placeholder="开始日期" v-model="form.date1"></el-date-picker>
            </el-col>
            <el-col :span="2">
              <span class="picker-span">-</span>
            </el-col>
            <el-col :span="11">
              <el-date-picker type="date" placeholder="结束日期" v-model="form.date2"></el-date-picker>
            </el-col>
          </el-row>

7.让表格一行内容居中

/deep/ .cell {
  &:nth-of-type(1) {
    display: flex;
    align-items: center;
  }
  display: flex;
  align-items: center;
  justify-content: center;
}

8.关于表格

 <table border="1" cellspacing="0" class="table">
              <tr>
                <td align="left">商品总计</td>
                <td align="center">¥852</td>
                <td align="center">邮费</td>
                <td align="center">¥0</td>
              </tr>
              <tr>
                <td align="left">实际支付</td>
                <td align="center">¥862</td>
                <td align="center">支付方式</td>
                <td align="center">微信</td>
              </tr>
            </table>
  .table {
  width: 100%;
  outline: none;
  border-collapse: collapse;
  // border: 0;
  border: 0.5px solid #e9e9e9 !important;

  tr {
    height: 37px;
    td {
      &:nth-of-type(1) {
        width: 190px;
        // height: 36px;
        padding: 0;
        border-left: 0;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        padding-left: 23px;
        color: rgba(102, 102, 102, 1);
      }

• 注意
  • border-collapse: collapse;
  • cellspacing=“0”;
  • border:0.5px solid rgba;

9.关于路由不刷新

const routerPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
  return routerPush.call(this, location).catch(error=> error)
}
Vue.use(VueRouter)

主页面  router-view 绑定一个key
<router-view ref="chartView" :key="key" class="main-content"></router-view>

key的值
  computed: {
    key() {
      // 只要保证 key 唯一性就可以了，保证不同页面的 key 不相同
      return this.$route.fullPath
    }
  },

10.关于form表单重置问题

必须在每个form-item上添加当前数据属性，才能生效
<el-form-item label="状态:" prop="state"  >

<button class="btns"  @click="empty('formInput')">清空</button>

empty(formName){
      // console.log(formName);
      // console.log(this.$refs[formName])
      this.$refs[formName].resetFields();
    },

• 每个form-item上添加属性，这样refs才能让这个form表单初始化成功

11.神坑浅拷贝

在vue中千万别浅拷贝赋值对象

12数组的方法增删改查

https://blog.csdn.net/Hedy17/article/details/79378774?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase

 var arr = ['a','b','c','d'];
 arr = ['a','b','c','d'];
 arr.splice(1,1,'ttt');

替换

13之通过路由设置导航

<template>
  <div class="tags">
    <ul>
      <li
        class="tags-li"
        v-for="(item, index) in tagsList"
        :class="{ active: isActive(item.path) }"
        :key="index"
      >
        <router-link :to="item.path" class="tags-li-title">
          {{
          item.title
          }}
        </router-link>
        <span class="tags-li-icon" v-if="item.title !== '首页'" @click="closeTags(index)">
          <i class="el-icon-close"></i>
        </span>
      </li>
    </ul>
    <!-- 其他操作按钮 -->
    <div class="tags-close-box">
      <el-dropdown @command="handleTags">
        <el-button size="mini">
          <i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu size="small" slot="dropdown">
          <el-dropdown-item command="other">关闭其他</el-dropdown-item>
          <el-dropdown-item command="all">关闭所有</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tagsList: []
    }
  },
  computed: {
    showTags() {
      return this.tagsList.length > 0
    }
  },
  watch: {
    // 对router进行监听，每当访问router时，对tags的进行修改
    $route(newValue) {
      this.setTags(newValue)
    }
  },
  created() {
    // 第一次进入页面时，修改tag的值
    this.setTags(this.$route)
  },
  methods: {
    isActive(path) {
      return path === this.$route.fullPath
    },
    // 关闭单个标签
    closeTags(index) {
      console.log(index)
      const delItem = this.tagsList.splice(index, 1)[0]
      const item = this.tagsList[index]
        ? this.tagsList[index]
        : this.tagsList[index - 1]
      if (item) {
        delItem.path === this.$route.fullPath && this.$router.push(item.path)
      } else {
        this.$router.push('/')
      }
    },
    // 关闭全部标签
    closeAll() {
      console.log(this.tagsList)
      this.tagsList = [
        {
          path: '/generdetail',
          title: '首页'
        }
      ]
      this.$router.push('/generdetail')
      console.log(this.tagsList)
    },
    // 关闭其他标签
    closeOther() {
      console.log(this.tagsList)
      const curItem = this.tagsList.filter(item => {
        return item.path === this.$route.fullPath
      })
      this.tagsList = curItem
      if (this.tagsList[0].title == '首页') {
        console.log('是首页')
      } else {
        this.tagsList.unshift({
          name: undefined,
          path: '/generdetail',
          title: '首页'
        })
      }
    },
    // 设置标签
    setTags(route) {
      let index = 0
      const isExist = this.tagsList.some(item => {
        return item.path === route.fullPath
      })
      this.tagsList.forEach(item => {
        if (item.title === '首页') {
          index = 1
        }
      })
      console.log(this.tagsList)
      console.log(isExist)
      if (!isExist) {
        if (route.meta.title !== '首页') {
          this.tagsList.push({
            title: route.meta.title,
            path: route.fullPath
          })
        }

        if (!index) {
          this.tagsList.unshift({
            title: '首页',
            path: '/generdetail'
          })
        }
      }
    },
    // 当关闭所有页面时隐藏
    handleTags(command) {
      command === 'other' ? this.closeOther() : this.closeAll()
    }
  }
}
</script>

<style scoped>
.tags {
  position: relative;
  height: 50px;
  overflow: hidden;
  /* background: red; */
  padding-right: 120px;
  margin-bottom: 10px;
  /* overflow-x: scroll; */
}

.tags ul {
  box-sizing: border-box;
  width: 100%;
  height: 30px;
  padding: 0;
  margin-top: 10px;
  margin-left: 5px;
  overflow: hidden;
}
a {
  text-decoration: none;
}
.tags-li {
  float: left;
  margin: 3px 5px 2px 3px;
  border-radius: 3px;
  font-size: 12px;
  overflow: hidden;
  cursor: pointer;
  height: 23px;
  line-height: 23px;
  border: 1px solid #e9eaec;
  background: #fff;
  padding: 0 5px 0 12px;
  vertical-align: middle;
  color: #666;
  -webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
}

.tags-li:not(.active):hover {
  background: #f8f8f8;
}

.tags-li-title {
  float: left;
  max-width: 80px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-right: 5px;
  color: #666;
}

.tags-li.active {
  color: #fff;
  border: 1px solid #10b9d3;
  background-color: #10b9d3;
}

.tags-li.active .tags-li-title {
  color: #fff;
}

.tags-close-box {
  position: absolute;
  right: 0;
  /* background: red; */
  top: 10px;
  box-sizing: border-box;
  padding-top: 1px;
  text-align: center;
  z-index: 10;
  box-shadow: none;
}
</style>

14 vue之代理解决跨域

main.js 页面

axios.defaults.baseURL = '/'
axios.interceptors.request.use(config => {
  config.headers.Authorization = Cookies.get('token')
  return config
})

vue.config.js 页面

module.exports = {
    // // cli3 代理是从指定的target后面开始匹配的，不是任意位置；配置pathRewrite可以做替换
    // devServer: {
    //   port: '8080',
    //   open: true,
    //   proxy: {
    //     '/api': {
    //       // /api 的意义在于，声明axios中url已/api开头的请求都适用于该规则，
    //       // 注意是以/api开头，即：axios.post({url: '/api/xxx/xxx'})
    //       target: 'demo.saas.com',
    //       // 此处target的意义在于：造成跨域是因为访
    //       // 问的host与我们的请求头里的origin不一致，所以我们要设置成一致，这个具体请看下文
    //       changeOrigin: true,
    //       pathRewrite: {'^/api': 'http://localhost:8080/api'}
    //       // 此处是大部分文章都不会明说的的地方，
    //       // 既然我们设置了代理，则所有请求url都已写成/api/xxx/xxx，那请求如何知道我们到底请求的是哪个服务器的数据呢
    //       // 因此这里的意义在于， 以 /api开头的url请求，代理都会知道实际上应该请求那里，
    //       // ‘我是服务器/api’，后面的/api根据实际请求地址决定，即我的请求url：/api/test/test，被代理后请求的则是
    //       // https://我是服务器/api/test/test
    //     }
    //   }
    // }
    devServer: {
		open: true, //是否自动弹出浏览器页面
		host: "localhost",
		port: '8080',
		proxy: {
			'/api': {
				target: 'http://demo.saas.com/',   // 请求服务器根路径
				changeOrigin: true,    // 是否跨域
				ws: true,   // websocket
				pathRewrite: {    // 重写路径: 当检测到请求地址里包含 /v1 时,将此路径进行跨域代理操作
					'^/api': ''
				}
			}
		}
	}
  }

登录事件

login() {
      // 登录之后设置token
      this.$axios.post('/api/admin/login/login', this.form).then(res => {
        console.log(res)
        if (res.data.code) {
          this.$cookies.set('token', res.data.data.token)
          this.$message.success('登录成功')
          this.$router.push('/index')
        } else {
          this.$message.error('登录失败！')
        }
      })
    }

15关于host

C:\Windows\System32\drivers\etc\hosts

16关于对接七牛云

import * as qiniu from 'qiniu-js'

   const file = e.target.files[0]
      const key = undefined
      const token = this.qiniuToken.token //从服务器拿的并存在本地data里
      const putExtra = {
        fname: '',
        params: {},
        mimeType: ['image/png', 'image/jpeg', 'image/gif']
      }
      const config = {
        useCdnDomain: true //使用cdn加速
      }
      const observable = qiniu.upload(file, key, token, putExtra, config)
      observable.subscribe({
        next: result => {
          // 主要用来展示进度
        },
        error: () => {
          console.log('上传图片失败')
          // this.$notify('上传图片失败')
        },
        complete: res => {
          console.log(res)
          this.school_banner_arr[index].banner = this.uploadURL + res.key
        }
      })

17分页联动效果

   <el-pagination
        :page-sizes="[9, 12, 15]"
        :page-size="pageSize"
        @current-change="handleCurrentChange"
        @size-change="changePagestate"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
      ></el-pagination>

   handleCurrentChange(e) {
      console.log(e)
      this.page = e
      this.getState()
    },
        changePagestate(e) {
      console.log(e)
      this.pageSize = e
      this.getState()
    },

18 删除效果

 async deletename(id) {
      console.log('删除操作', id)
      await this.$confirm('此操作将永久删除该厂家信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          console.log(id)
          let obj = {
            factory_id: id,
            token: this.token
          }
          this.$axios
            .post('/api/admin/factory/factory_del', obj)
            .then(res => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.getState()
            })
            .catch(err => {
              this.$message({
                type: 'error',
                message: '删除失败!'
              })
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },

19 表格 index 写法

 <el-table-column type="index" label="#" width="90">
        <template slot-scope="scope">{{scope.$index + (page - 1) * pageSize +1 }}</template>
      </el-table-column>

20 提交form表单

 console.log('提交form表单')
      let obj = {
        token:this.token,
        password:this.this.form.password
      }
      const res = await this.$axios.post('/api',obj)
      if(res.data.code == 1){
        this.$message.error('修改成功');
      }else{
        this.$message.error('修改成功');
      }

21 card 高度

.card {
  width: 100%;
  overflow: scroll;
  // height: 3000px !important;
}

22 上传类型为图片

     if (!/image\/\w+/.test(file.type)) {
        this.$message.error('上传类型必须是图片')
        return false
      }

23.vue实现下载图片

https://www.cnblogs.com/zhujiqian/p/11475467.html

    downQrcode(row) {
      let hreLocal = ''
      hreLocal = this.qiNiuUrl + row.qrcode
      let name = row.school_name
      this.downloadByBlob(hreLocal, name)
    },

   downloadByBlob(url, name) {
      let that = this;
      let image = new Image()
      image.setAttribute('crossOrigin', 'anonymous')
      image.src = url
      image.onload = () => {
        let canvas = document.createElement('canvas')
        canvas.width = image.width
        canvas.height = image.height
        let ctx = canvas.getContext('2d')
        ctx.drawImage(image, 0, 0, image.width, image.height)
        canvas.toBlob(blob => {
          let url = URL.createObjectURL(blob)
          that.download(url, name)
          // 用完释放URL对象
          URL.revokeObjectURL(url)
        })
      }
    },

   download(href, name) {
      let eleLink = document.createElement('a')
      eleLink.download = name
      eleLink.href = href
      eleLink.click()
      eleLink.remove()
    },

24.excel文件导出

  let alink = document.createElement('a')
      alink.href = this.baseUrl+'api/admin/school/collection_excel?qrcode_id='+id+'&type=2&token='+this.token
      alink.target = '_blank'
      alink.click();

25判断是否为xls和xlsx

      let fileObj = e.target.files[0],
        fileName = fileObj.name,
        fileType = fileName.substring(fileName.indexOf('.'))
      if (fileType != '.xls' && fileType != '.xlsx') {
        this.$message.error('上传文件只能是xls,xlsx格式！')
        return false
      }

26.公共函数

https://www.cnblogs.com/chase-star/p/9990124.html

27.出现小手

cursor:pointer;

28.点击图片跳转

   let alink = document.createElement('a')
      alink.href = this.qiNiuUrl + imgurl;
      alink.target = '_blank';
      alink.click();

29.element表格默认展开删除

:row-class-name="getRowClassName"
:default-expand-all="true"
type="expand"
        
getRowClassName({ row, rowIndex }) {
      if (row) {
        return 'row-expand-cover'
      }
    }
    
    
    
 <style>
.row-expand-cover .el-table__expand-column {
  padding-bottom: 0;
  pointer-events: none;
}
.row-expand-cover .el-table__expand-column .el-icon {
  opacity: 0;
}
</style>

30.改变select框的样式

  <el-select
                v-model="postage_id"
                style="width:239px;"
                :popper-append-to-body="false"
                popper-class="select-option"
                placeholder="请选择邮费模板"
              >
                <el-option
                  v-for="(item,index) in postmanList"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>

更改select框下的input的样式

          <el-form-item label="发货仓库:" class="select-option">
            <el-select
              v-model="warehouse_id"
              :popper-append-to-body="false"
              :placeholder="options.length > 0 ? '选择发货仓库':'请先选择生产厂家'"
            >
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.house_name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          
          
          css
.select-option /deep/ .el-input__inner{
  width: 165px;
}

31.switch开关

     <template slot-scope="scope">
          <el-switch
            @change="changeSchoolState(scope.row.state,scope.row.id)"
            v-model="scope.row.state"
            active-color="#31a4ff"
            inactive-color="#fa675c"
            :active-value="1"
            :inactive-value="2"
          ></el-switch>
          <span v-if="scope.row.state ==1" class="switch">已启用</span>
          <span v-else class="switch">未启用</span>
        </template>

32.eslint关闭

https://juejin.im/post/5bd02f98e51d457a944b634f


lintOnSave: false,

33.diglog鼠标滑动消失

:close-on-click-modal="false"

34.更改日期选择期宽度

<el-date-picker class="input-class" type="date" placeholder="请选择审核时间"></el-date-picker>


.input-class{
  /deep/ .el-input__inner{
    width: 160px;
  }
}

35.分页组件

import paging from '../common/paging.vue'

  components: {
    paging
  },

    <paging
      :page="page"
      @current-change="handleCurrentChange"
      @size-change="changePagestate"
      :pageSize="pageSize"
      :totalCount="totalCount"
    ></paging>

<template>
  <div class="paging">
    <el-pagination
      :page-sizes="arr"
      :current-page="page"
      @current-change="handleCurrentChange"
      @size-change="changePagestate"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalCount"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  props: {
    // 当前的页面
    page:{
      type:Number,
      default:1
    },
    // 当前页的条数
    pageSize: {
      type: Number,
      default: 0
    },
    // 当前页的总数据
    totalCount: {
      type: Number,
      default: 0
    },
    // 当前页的分类
    arr: {
      type: Array,
      default:() => {
        return [10,15,20]
      }
    }
  },
  created(){
    this.changePagestate(this.arr[0])
  },
  methods: {
    handleCurrentChange(e){
      this.$emit('current-change',e);
    },
    changePagestate(e){
      this.$emit('size-change',e);
    }
  }
}
</script>

<style lang="scss">
.paging {
  width: 100%;
  height: 50px;
  // background: red;
  // float: right;
  .el-pagination {
    float: right;
    margin-top: 15px;
    margin-bottom: 30px;
  }
}
</style>

36.表格序号

      <el-table-column type="index" label="#" width="60">
        <template slot-scope="scope">
          {{
          scope.$index + (page - 1) * pageSize + 1
          }}
        </template>
      </el-table-column>

37.使用卡片导航条 cards

import CardTop from '../common/Cards.vue'

CardTop

<CardTop contenet="学校列表" @back="navageteNewadd" btns="新增"></CardTop>

<template>
  <div class="card-top">
    <div class="tops" v-if="!Breadcrumb">
      <span :class="[Background ? 'content color' : 'content']">
        {{
        contenet
        }}
      </span>
      <div class="button" v-if="btns" @click="back">{{ btns }}</div>
    </div>
    <div class="tops1" v-if="Breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <div>
          <el-breadcrumb-item :to="{ path: List[0].path }">{{ List[0].name }}</el-breadcrumb-item>
          <el-breadcrumb-item>{{ List[1].name }}</el-breadcrumb-item>
        </div>
        <div>
          <div class="button1" @click="back">{{ btns }}</div>
        </div>
      </el-breadcrumb>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  props: {
    // 设置是否是Breadcrumb
    Breadcrumb: {
      type: Boolean,
      default: false
    },
    // 设置不是设置breadcrumb 的左边内容
    contenet: String,
    // 设置按钮的内容
    btns: {
      type: String,
      default: ''
    },
    // 设置breadcrumb list的数据
    List: Array,
    // 设置是否有背景颜色
    Background: {
      type: Boolean,
      default: false
    },
    Height: {
      type: Number,
      default: 0
    },
    url: {
      type: String,
      default: ''
    }
  },
  methods: {
    back() {
      this.$emit('back', this.btns, this.url)
    }
  }
}
</script>

<style lang="scss" scope>
.card-top {
  box-sizing: border-box;
  width: 100%;
  height: 50px;
  margin-bottom: 20px;
  .tops {
    width: 100%;
    height: 50px;
    height: 100%;
    padding: 10px 20px;
    box-sizing: border-box;
    font-size: 16px;
    // font-weight: bold;
    color: #333333;
    border-bottom: 1px solid rgba(243, 243, 243, 1);
    // background: red;
    line-height: 32px;
    .button {
      width: 70px;
      height: 32px;
      background: rgba(32, 198, 200, 1);
      border-radius: 4px;
      float: right;
      text-align: center;
      line-height: 32px;
      font-size: 14px !important;
      color: white;
      cursor: pointer;
    }
  }
  .tops1 {
    width: 100%;
    height: 50px;
    padding: 10px 20px;
    box-sizing: border-box;
    line-height: 50px;
    .el-breadcrumb {
      width: 100%;
      line-height: 34px;
      margin: 0;
      font-size: 16px;
      justify-content: space-between;
      .el-button {
        cursor: pointer;
        &:nth-of-type(2) {
          line-height: 34px;
        }
        float: right;
      }
    }
    border-bottom: 1px solid rgba(243, 243, 243, 1);
    box-sizing: border-box;
  }
  .content {
    font-size: 16px;
  }
}
// .el-button size="mini" type="primary"
.button1 {
  width: 70px;
  height: 32px;
  background: rgba(32, 198, 200, 1);
  border-radius: 4px;
  float: right;
  text-align: center;
  font-size: 14px;
  color: white;
  line-height: 32px;
  cursor: pointer;
}
.bc {
  width: 100%;
  height: 53px;
  background: #7ac9cb;
}
.color {
  color: white;
}
</style>

38.关于watch监听属性 新旧值一样的问题

  data:{
        testData:{
            dataInfo:{
                a: '我是a',
                b: '我是b'
            }
        }
    },
    watch: {
      testDataNew: {
        handler: (val, olVal) => {
          console.log('我变化了', val, olVal)
        },
        deep: true
      }
    },
    computed: {
      testDataNew() {
        return JSON.parse(JSON.stringify(this.testData))
      }
    }

39.select框异步获取数据的问题

  如果页面初次加载时候需要select的框的值，那么一定要在mounted方法里执行；

40.element使用外部的 class图片

https://www.jianshu.com/p/59dd28f0b9c9

       <el-form-item>
              <el-input placeholder="用户名" v-model="form.username">
                <i slot="prefix" class="el-icon-thirdshouji"></i>
              </el-input>
            </el-form-item>

41.表格内容超出部分提示

:show-overflow-tooltip="true"

          <el-table-column
            prop="school_name"
            :show-overflow-tooltip="true"
            label="学校名称"
            align="center"
            width="200"
          ></el-table-column>

42.火狐滚动条隐藏

scrollbar-width: none;

43.谷歌滚动条隐藏

::-webkit-scrollbar {
    display: none;
}

44.element-ui表格合并 合并同一行的几个列

        <el-table
          :data="orderList"
          :row-class-name="getRowClassName"
          default-expand-all
          :span-method="arraySpanMethod"
          type="expand"
          :header-cell-style="getRowClass"
          style="width: 100%"
        >
        :span-method="arraySpanMethod"

    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      console.log(rowIndex)
      if (rowIndex >= 0) {
        if (columnIndex == 2) {
          return [1, 2]
        } else if (columnIndex == 3) {
          return [0, 0]
        }
      }
      if (rowIndex >= 0) {
        if (columnIndex == 5) {
          return [1, 2]
        } else if (columnIndex == 6) {
          return [0, 0]
        }
      }
      if (rowIndex >= 0) {
        if (columnIndex == 12) {
          return [1, 2]
        } else if (columnIndex == 10) {
          return [0, 0]
        }
      }
    },

45.element-ui获得省市区

          arr_arr[0] = parseInt(res.data.data.province)
          arr_arr[1] = parseInt(res.data.data.city)
          arr_arr[2] = parseInt(res.data.data.district)
          this.$nextTick(() => {
            this.addr_arr = arr_arr
          })
          
          // 等到dom加载完成后把数据赋值

            <el-form-item label-width="100px" label="所属地区：">
              <el-cascader filterable :options="cityData" v-model="addr_arr"></el-cascader>
            </el-form-item>

46.页面刷新保存vuex

    // 在页面刷新时将store保存到sessionStorage里
    window.addEventListener('beforeunload', () => {
      sessionStorage.setItem('store', JSON.stringify(this.$store.state))
    })