vue项目问题总结

这篇文章主要总结了一些在项目中遇到的一些小问题以及对应的解决方案，避免日后踩坑，后续补充中，如果你对这些问题有不同的解答，欢迎评论

1. 输入框使用v-model 绑定值，但是不能改变

// 第一种情况
<el-input v-model="form.title"></el-input>
// 初始化
data () {
    return {
        form: {}
    }
}
// 赋值,其中formData为父组件传过来的数据
mounted (){
    this.form.title = this.formData.title
}
// 这里不生效的原因为title没有初始化
data () {
    return {
        form: {title:''}}
}
// 第二种情况
在表单中使用时，用:model=""给输入框赋值
<el-form :model="formData">
   <el-form-item>
      <el-input placeholder="请输入" :model="formData.value" size="small"/>
   </el-form-item>
</el-form>
// 解决方案，改为
<el-input placeholder="请输入" v-model="formData.value" size="small"/>

2. 文本内容不对html标签转译

我想要输入下面的内容，但是保存数据后，就变成了aaa

解决办法： 如果是html内容、javascript、xml或其他特殊内容，使用<xmp></xmp>
如果是有空格和回车这样的特殊字符的简单文本 在文本外加<pre></pre> 标签

3. 基础导出功能

SensitiveOperationExport(params).then(res => {
    if (res.data.code === '200') {
    // 这里是导出
      window.location.href = res.data.data.path
      this.$message({
        message: '导出成功！',
        type: 'success'
      })
    } else {
      this.$message.error({message: '导出失败！'})
    }
  })

4. 使用element table 时，禁用部分复选框

<el-table-column type="selection" align="center" fixed :selectable="selectable"></el-table-column>

官网上有这样一个操作 selectable, 仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选

// 判断表格数据是否可选
 selectable(row, index) {
   if (row.IsDefault === 0) {
     return false // 返回false为不可选数据
   } else {
     return true
   }
 }

5.接口返回的数据为json类型，展示到表格中时，可以这样转换

// 数据结构 content: "{'title': '这是标题'}"
this.title = JSON.parse(content).title

6. 列表中点击图片放大功能

安装viewer，可支持图片的切换，旋转，放大等功能，具体操作文档可百度查看，使用在页面中也非常简单，第一步，全局配置

// main.js 中引入配置
Viewer.setDefaults({
  'zIndex': 9999,
  'inline': false, // 是否默认展示缩略图
  'button': true, // 右上角按钮
  'navbar': true, // 底部缩略图
  'title': true, // 当前图片标题
  'toolbar': true, // 底部工具栏
  'tooltip': true, // 显示缩放百分比
  'movable': false, // 是否可以移动
  'zoomable': true, // 是否可以缩放
  'rotatable': true, // 是否可旋转
  'scalable': true, // 是否可翻转
  'transition': true, // 使用 CSS3 过度
  'fullscreen': true, // 播放时是否全屏
  'keyboard': true, // 是否支持键盘
  'url': 'data-source'
})
// 页面中使用
<viewer>
<img :src="scope.row.content "/>
</viewer>

7. 上移和下移操作

一般来说，上移和下移是掉接口操作的，但是也有不掉接口的

/ 上移
moveUp (index, row) {
  if (index > 0) {
    let upDate = this.tableData[index - 1]
    this.tableData.splice(index - 1, 1)
    this.tableData.splice(index, 0, upDate)
  }
},
// 下移
moveDown (index, row) {
  if ((index + 1) === this.tableData.length) {
    console.log('已经是最后一条，不可下移')
  } else {
    let downDate = this.tableData[index + 1]
    this.tableData.splice(index + 1, 1)
    this.tableData.splice(index, 0, downDate)
  }
}

8. 表格的全选和反选

<el-table :data="tableData" border :select-all="allSelect" @selection-change="changeFun" ref="form" height="700"></el-table>
// tableData 是表格数据
<div>
    <el-button @click="toggleSelect(tableData)">全选</el-button>
    <el-button @click="reverseSelect(tableData)">反选</el-button>
</div>
// 全选
    toggleSelect (rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.form.toggleRowSelection(row, !this.allSelect)
        })
        this.allSelect = !this.allSelect
      }
    },
    // 反选
    reverseSelect (rows) {
      let checked = this.data
      if (rows) {
        rows.map(row => {
          checked && checked.map(item => {
            if (row.index !== item.index) {
              this.$refs.form.toggleRowSelection(item, false)
              this.$refs.form.toggleRowSelection(row, true)
            } else {
              this.$refs.form.toggleRowSelection(row, false)
            }
          })
        })
        if (checked.length === 0) {
          rows.forEach(row => {
            this.$refs.form.toggleRowSelection(row, true)
          })
        }
      }
    },
    // 获取选择的数据
    changeFun (val) {
      this.data = val
    }

9. 按住说话功能

这个功能依赖于recorder.js, 上一篇文章已经介绍过用法了，这里就不在细说

10. 表格编辑和保存切换

// editColorShow: '' // 设置敏感操作默认显示编辑
// clearEdit: '000' // 替换editColorShow的值
<el-table-column label="操作" align="center"
    width="200">
    <template slot-scope="scope">
      <el-button size="small" v-if="editColorShow !== scope.$index" type="primary" @click="editColor(scope.$index, scope.row)">编辑</el-button>
      <el-button size="small" v-if="editColorShow === scope.$index" type="primary" @click="submitSettingOperation(scope.$index, scope.row)">保存</el-button>
    </template>
 </el-table-column>
 // 方法中这样
editColor (index, row) {
  this.editColorShow = index
},
submitSettingOperation (index, data) {
  this.editColorShow = this.clearEdit
 }

11. 深拷贝

第一种：

function copy(arr) {
  var newObj = arr.constructor === Array ? [] : {}
  if (typeof arr === 'object') {
    for (var i in arr) {
      if (typeof arr[i] === 'object') {
        newObj[i] = copy(arr[i])
      }
      newObj[i] = arr[i]
    }
    return newObj
  } else {
    return
  }
}

第二种

function copy (obj) {
 var newObj = obj.constructor === Array ? [] : {}
 newObj = JSON.parse(JSON.stringify(obj))
 return newObj
}

12.表单重置问题

之前重置表单的时候都是this.form.xx='',如果是一两个还好，但是如果表单很多的话就不是很适用了，发现了一个很便捷的操作，只要一行代码就搞定了

this.$refs['infoForm'].resetFields() 
// 前提是要重置的输入框必须设置prop属性才可以

13. txt文件导出，有两种方式

第一种 纯前端下载

fetch('https://xxxxx.com/' + item.path).then(res => res.blob().then(blob => {
    var a = document.createElement('a')
    var url = window.URL.createObjectURL(blob)
    var filename = 'text.txt'
    a.href = url
    a.download = filename
    a.click()
    window.URL.revokeObjectURL(url)
}))

第二种 获取到txt的内容后下载

createDownload (fileName, content) {
      var blob = new Blob([content])
      var link = document.createElement('a')
      var bodyEle = document.getElementsByTagName('body')[0]
      link.innerHTML = fileName
      link.download = fileName
      link.href = URL.createObjectURL(blob)
      bodyEle.appendChild(link)
      link.click()
      bodyEle.removeChild(link)
    }

虽然两种都可以实现下载，但是要保证下载的接口可以在页面中访问到，不会有跨域等问题

14. 导出exel

导出表格这里提供两种方法，第一种依赖第三方，首先下载三个依赖
下载Blob.js和Export2Excel.js 两个文件，引入文件中

// npm install file-saver xlsx script-loader --save
// 导出
    onExportExcel (formName) {
      import('@/vendor/Export2Excel').then(excel => {
// 表格的title
        const tHeader = ['订单编号', '姓名', '员工编号', '手机号', '公司']
// 对应的字段     
        const filterVal = ['sn', 'user_name', 'user_no', 'user_phone', 'user_company']
        const data = this.formatJson(filterVal, this.dataTable)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: `订单列表`
        })
      })
    },
    formatJson (filterVal, jsonData) {
      let arr = jsonData.map(v => filterVal.map(j => v[j]))
      return arr
    }

第二种 通过vue-json-excel，具体细节可参考vue-json-excel

// 安装 npm install vue-json-excel，引入
// vue中使用
<download-excel
    class   = "btn btn-default"
    :data   = "json_data"
    :fields = "json_fields"
    worksheet = "My Worksheet"
    name    = "filename.xls">
</download-excel>

data(){
  return {
// 要导出的字段
    json_fields: {
            'Complete name': 'name',
            'City': 'city',
            'Telephone': 'phone.mobile',
            'Telephone 2' : {
                field: 'phone.landline',
                callback: (value) => {
                    return `Landline Phone - ${value}`;
                }
            },
        },
// 要导出的数据
        json_data: [
            {
                'name': 'Tony Peña',
                'city': 'New York',
                'country': 'United States',
                'birthdate': '1978-03-15',
                'phone': {
                    'mobile': '1-541-754-3010',
                    'landline': '(541) 754-3010'
                }
            },
            {
                'name': 'Thessaloniki',
                'city': 'Athens',
                'country': 'Greece',
                'birthdate': '1987-11-23',
                'phone': {
                    'mobile': '+1 855 275 5071',
                    'landline': '(2741) 2621-244'
                }
            }
        ],
        json_meta: [
            [
                {
                    'key': 'charset',
                    'value': 'utf-8'
                }
            ]
        ]
}
}

15.导航栏中使用iconfont，选中不变色问题

先来看看对比

项目是基于element-ui开发的，避免不了使用到图标，所以阿里图库是个很好的选择，这里遇到的问题是左侧导航栏选中后，文字颜色发生变化，但是图标却一直不变，一般来说引用阿里图库有三种方式：Unicode、Font Class 、symbol；我用的是symbol方式引用，具体如下

1.图标选用的是svg格式，选择要使用的图标，下载svg格式
2.创建icon文件夹用于存放图标，创建svgIcon文件夹用于使用图标，使用如下

16. vue模糊搜索路由功能

需求： 导航栏中提供搜索框，可根据输入的页面名称，跳转到指定页面，代码如下

<template>
  <div>
    <el-select
      ref="headerSearchSelect"
      v-model="search"
      :remote-method="querySearch" // 远程搜索方法
      remote  // 是否为远程搜索
      filterable // 是否可搜索
      default-first-option // 输入框按下回车，返回第一个匹配项，需搭配filterable或remote使用
      placeholder="搜索"
      class="header-search-select"
      @change="change"
    >
      <el-option v-for="item in options" :key="item.path" :value="item" :label="item.title.join(' > ')" />
    </el-select>
  </div>
</template>
<script>
import path from 'path';
export default {
// 获取到当前账户下的所有可见页面路由
  props: {
    routers: {
      type: Array
    }
  },
  data () {
    return {
      search: '',
      options: [],
      searchPool: []
    }
  },
  computed: {
    routes() {
      return this.routers
    }
  },
  mounted () {
    this.searchPool = this.generateRoutes(this.routes)
  },
  methods: {
    // 远程搜索
    querySearch (query) {
      if (query !== '') {
        // 数组去重
        this.options = Array.from(new Set(this.searchQuery(query)))
      } else {
        this.options = []
      }
    },
    // 改变时跳转
    change (val) {
     // 判断当前页与搜索的页面是否一致，如一致则清空不跳转，反之跳转
      if (val.path !== this.$router.history.current.path) {
        this.$router.push(val.path)
        // 跳转路径后清空搜索框内容，也可以不清空
        this.search = ''
        this.options = []
      } else {
        this.search = ''
        this.options = []
      }
    },
    // 筛选符合条件的路由
    searchQuery (query) {
      const list = []
      this.searchPool.map(item => {
        item.title.filter(items => {
          if (items.indexOf(query) > -1) {
            list.push(item)
          }
        })
      })
      return list
    },
    // 处理路由数据
    generateRoutes(routes, basePath = '/', prefixTitle = []) {
      let res = []
      for (const router of routes) {
        if (router.hidden) { continue }
        const data = {
          path: path.resolve(basePath, router.path),
          title: [...prefixTitle]
        }
        if (router.meta && router.meta.title) {
          data.title = [...data.title, router.meta.title]
          if (router.redirect !== 'noRedirect') {
            res.push(data)
          }
        }
        // recursive child routes
        if (router.children) {
          const tempRoutes = this.generateRoutes(router.children, data.path, data.title)
          if (tempRoutes.length >= 1) {
            res = [...res, ...tempRoutes]
          }
        }
      }
      return res
    }
  }
}
</script>

需要注意的点是路由的写法，一定要有对应的title，例如这样

// 当页面没有子级菜单时
{
    path: '/log',
    component: Home,
    name: 'Log',
    redirect: '/redirect',
    children: [
      {
        path: 'index',
        name: 'LogIndex',
        component: _import('log/Index'),
        meta: {
          title: '日志管理',
          roles: [RoleName.Super, RoleName.AfterSale],
          icon: 'custom-rizhi'
        }
      }
    ]
  }
// 当页面有子级菜单时
{
    path: '/operation',
    component: Home,
    name: 'Operation',
    redirect: '/redirect',
    meta: { title: '运营管理', icon: 'custom-yunying1' },  // 区别在于这里，有子级的一定要在这加上meta
    children: [
      {
        path: 'payment',
        name: 'OperationPayment',
        component: _import('operation/Payment'),
        meta: {
          title: '支付管理',
          roles: [RoleName.Operator]  // 可通过roles判断当前用户是否有权限查看该页面
        }
      },
      {
        path: 'shop',
        name: 'OperationShop',
        component: _import('operation/Shop'),
        meta: {
          title: '店铺管理',
          roles: [RoleName.Super, RoleName.Operator, RoleName.Staff, RoleName.Marketer]
        }
      },
      {
        path: 'banner',
        name: 'OperationBanner',
        component: _import('operation/Banner'),
        meta: {
          title: '图片管理',
          roles: [RoleName.Super, RoleName.Operator, RoleName.Staff, RoleName.Marketer]
        }
      }
    ]
  }

17.补充几个关于路由的小问题

1. <router-link to=""></router-link>: 解析成a标签，通过to指定跳转路径
   <router-view>：视图渲染组件

2. 路由引入组件的两种方式

import app from '@/view/app'
{
  path: '/',
  component: app, // 第一种：直接引入
  component: () => import('@/view/app') // 第二种：懒加载
}

3. 动态路由

{
  path: '/argu:name' // name为动态路由参数
  // 嵌套路由
  path: '/parent',
  children: [
    {
      path: '/child'
    }
  ],
  // 命名路由
  path: '/login',
  name: 'name' // 命名，在router-link中可以:to="{name: 'login'}"跳转
}

4. 命名视图，可加载多个组件

<router-view/>
<router-view name="email"/>
{
  path: 'names',
  components: {
    default: () => import('@/view/app'),
    email: () => import('@/view/message')
  }
}

5. 重定向三种写法

{
  path: '/email',
  redirect: '/main',  // 第一种
  redirect: {  // 第二种
    name: 'main'
  },
  redirect: to => {  // 第三种
    return {
      name: 'main'
    }
  }
}

6.别名（访问别名就相当于访问当前路由）

// 例如，访问main_index就相当于访问main
{
  path: '/main',
  alias: '/main_index'
}

7.跳转

this.$router.push('/home') // 可直接跳转到home页
// 携带参数跳转一
this.$router.push({
  name: 'home',
  querry: {
    // 参数,显示在地址栏中
  }
})
// 携带参数二
this.$router.push({
  params: {
    // 参数
  }
})
// 携带参数三
this.$router.push({
  // 第三种
  name: '我是参数'
  path:`/home${name}`
})

8.替换（push和replace区别）
push浏览器会有记录，返回上一页，replace会把当前页当为父级页
举个例子：当前页为home，点击跳转到about页，点击push跳转后在返回，上一页为home
当前页为home，点击跳转到about页，点击replace跳转后在返回，上一页为about
this.$router.replace({
name: 'home'
})

9. props可以在router中传值

{
  path: '/about',
// 第一种
  props: {
    foood: 'apple'
  }，
// 第二种
  props: router => {
    food: router.query.food   // 参数中传递了food值
  }
}
// 页面中获取
props: {
  foood: {
    type: string,
    default: 'orange'
  }
}

10. router中配置mode: 'history'可以去除地址栏#，但需要后端配置支持
    router.before() 前置跳转，可用于跳转前判断是否登录，是否有权限

18. 随机生成一个id值-->this._uid

<span>{{index}}</span>
// 初始化定义
index: `index_${this._uid}`

19.解决vue项目浏览器警告问题

解决vue项目在使用element-ui时出现警问题,不知道你在运行项目的时候浏览器是否看到提示这种信息（我用的是谷歌浏览器）, 虽然对项目运行没有影响，但是看着也是不怎么舒服的，内容如下
————————————————
[Violation] Added non-passive event listener to a scroll-blocking ‘mousewheel’ event. Consider marking event handler as ‘passive’ to make the page more responsive

解决方法如下
1.安装依赖 npm i default-passive-events -S
2.main.js 引入import 'default-passive-events'
3.解决了

解决vue项目在使用moment时出现警问题，内容如下
————————————————
Deprecation warning: value provided is not in a recognized RFC2822 or ISO format. moment construction falls back to js Date(), which is not reliable across all browsers and versions. Non RFC2822/ISO date formats are discouraged and will be removed in an upcoming major release. Please refer to http://momentjs.com/guides/#/warnings/js-date/ for more info.

解决方法如下
1.main.js中添加一行 moment.suppressDeprecationWarnings = true 关闭提示
2.解决了

// 日期时间格式化
Vue.filter('dateformat', function(dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
  return moment(dataStr).format(pattern)
})
Vue.filter('getDate', function(dataStr, pattern = 'YYYY-MM-DD') {
  return moment(dataStr).format(pattern)
})
Vue.filter('getTime', function(dataStr, pattern = 'HH:mm:ss') {
  return moment(dataStr).format(pattern)
})
// 金额格式化
Vue.filter('money', function(val) {
  val = val.toString().replace(/\$|\,/g, '')
  if (isNaN(val)) {
    val = '0'
  }
  const sign = (val === (val = Math.abs(val)))
  val = Math.floor(val * 100 + 0.50000000001)
  let cents = val % 100
  val = Math.floor(val / 100).toString()
  if (cents < 10) {
    cents = '0' + cents
  }
  for (let i = 0; i < Math.floor((val.length - (1 + i)) / 3); i++) {
    val = val.substring(0, val.length - (4 * i + 3)) + ',' + val.substring(val.length - (4 * i + 3))
  }
  return (((sign) ? '' : '￥') + val + '.' + cents)
})
// 银行卡号格式化
Vue.filter('bankCard', function(accNo) {
  let result = ''
  let index = 0
  if (accNo !== undefined && accNo != null) {
    for (let i = 0; i < accNo.length; i++) {
      result += accNo.charAt(i)
      index++
      if (index === 4 && (i + 1 !== accNo.length)) {
        result += ' '
        index = 0
      }
    }
  }
  return result
})

// input框自动获取焦点，自定义指令，与methods同级, input添加指令v-focus
directives: {
    'focus': {
      // 指令的定义
      inserted(el) {
        if (el.tagName.toLocaleLowerCase() === 'input') {
          el.focus()
        } else {
          if (el.getElementsByTagName('input')) {
            el.getElementsByTagName('input')[0].focus()
          }
        }
      }
    }
  }

插件  vue-particles 安装引入

<el-table>
   <el-table-column v-if="checked" label="旧车价格" width="200" />
</el-table>

updated() {
  this.$refs['table'].doLayout()
}

// 级联下拉
<el-cascader
   v-model="ParentID"
   :options="options"
   :props="{ value: 'PowerID', label: 'PowerName'}"
/>

const arr1 = [
  { parent: '0', power: '110' },
  { parent: '110', power: '101' },
  { parent: '110', power: '102' },
  { parent: '0', power: '220' },
  { parent: '220', power: '201' },
  { parent: '220', power: '202' },
  { parent: '101', power: '1011' }
]

{ parent: '0', power: '110', children: [
  { parent: '110', power: '101', children: [{ parent: '101', power: '1011' }] },
  { parent: '110', power: '102' }
] },
{{ parent: '0', power: '220' }, children: [
  { parent: '220', power: '201' },
  { parent: '220', power: '202' }
]}

const render = it => {
  const children = arr1.filter(item => item.parent === it.power).map(render)
     if (children.length) {
       it.children = children
      }
     return it
   }
   this.options = arr1.filter(it => it.parent === '0').map(render)

<el-table
      :data="data2"
      border
      stripe
      style="width: 100%"
      :height="tableHeight"
      :header-cell-style="{textAlign: 'center',background:'#eef1f6'}"
      :sort-orders="['ascending', 'descending']"
      :default-sort="{prop: 'LineSort', order: 'descending'}"
      :span-method="objectSpanMethod" // 这一行是主要的
    />
// 处理相同数据合并
    setTable() {
      const spanOneArr = []
      const spanTwoArr = []
      var concatOne = 0
      // 判断是否为最后一级
      this.tableData.forEach((item, index) => {
        if (index === 0) {
          spanOneArr.push(1)
          spanTwoArr.push(1)
        } else {
          if (item.LineName === this.tableData[index - 1].LineName) { // 需合并相同内容的判断条件
            spanOneArr[concatOne] += 1
            spanOneArr.push(0)
          } else {
            spanOneArr.push(1)
            concatOne = index
          }
        }
      })
      return {
        one: spanOneArr,
        two: spanTwoArr
      }
    },
    // 合并行
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 1 || columnIndex === 4 || columnIndex === 5 || columnIndex === 6 || columnIndex === 7) {
        const _row = (this.setTable(this.tableData).one)[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    },

<el-dialog :title="showForm ? '添加' : '编辑'" :visible.sync="addVisible" width="910px" class="dialog-style" :close-on-click-modal="false">
      <el-form ref="editForm" :model="editForm" label-width="90px" style="width: 90%">
        <el-form-item label="服务费率" prop="ServiceRate">
          <el-input v-model="editForm.ServiceRate" placeholder="0">
            <template slot="append">%</template>
          </el-input>
        </el-form-item>
        <el-form-item label="最低服务费" prop="ServiceCharge">
          <el-input v-model="editForm.ServiceCharge" placeholder="0">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="贷款期数" prop="LoanPeriod">
          <el-input v-model="editForm.LoanPeriod" placeholder="0">
            <template slot="append">个月</template>
          </el-input>
        </el-form-item>
        <el-form-item label="贷款利率" prop="lendingRate" style="position: relative">
          <el-input v-model="editForm.lendingRate" placeholder="0">
            <template slot="append">%</template>
          </el-input>
          <i class="icon-btn hoverStyle el-icon-circle-plus-outline" @click="addItem" />
        </el-form-item>
        <!-- 动态增加的表单 -->
        <div v-for="(item, index) in editForm.dynamicItem" :key="index" style="display: inline-flex;">
          <el-form-item label="贷款期数" :prop="item.LoanPeriod + '_' + index">
            <el-input v-model="item.LoanPeriod" placeholder="0">
              <template slot="append">个月</template>
            </el-input>
          </el-form-item>
          <el-form-item label="贷款利率" :prop="item.lendingRate + '_' + index" style="position: relative;margin-left: 26px;">
            <el-input v-model="item.lendingRate" placeholder="0">
              <template slot="append">%</template>
            </el-input>
            <i class="icon-btn hoverStyle el-icon-remove-outline" @click="deleteItem(index, item)" />
            <el-button type="text" class="up-btn" :disabled="index === 0" @click="moveUp(index)">上移</el-button>
            <el-button type="text" class="down-btn" :disabled="index === editForm.dynamicItem.length - 1" @click="moveDown(index)">下移</el-button>
          </el-form-item>
        </div>
      </el-form>
      <div class="dialog-footer">
        <el-button class="btn-footer" type="primary" @click="addSaveData">保 存</el-button>
        <el-button class="btn-footer" @click="closeAddDialog('editForm')">取 消</el-button>
      </div>
    </el-dialog>
// methods中
// 添加增加一行表单
    addItem() {
      this.editForm.dynamicItem.push({
        RId: 0, // 新增传0
        BId: 0, // 新增传0
        LoanPeriod: '', // 期数
        lendingRate: '', // 贷款利率
        LoanSort: 0 // 排序按1开始
      })
    },
    // 添加删除一行表单
    deleteItem(index, row) {
      this.editForm.dynamicItem.splice(index, 1)
    },
    // 上移
    moveUp(index) {
      if (index > 0) {
        const upDate = this.editForm.dynamicItem[index - 1]
        this.editForm.dynamicItem.splice(index - 1, 1)
        this.editForm.dynamicItem.splice(index, 0, upDate)
      }
    },
    // 下移
    moveDown(index) {
      const downDate = this.editForm.dynamicItem[index + 1]
      this.editForm.dynamicItem.splice(index + 1, 1)
      this.editForm.dynamicItem.splice(index, 0, downDate)
    }

// 修改table滚动条
.el-table{
  .el-table__fixed,
    .el-table__fixed-right {
      height: 100% !important;
    }
}
//滚动条的宽度
::-webkit-scrollbar {
  width: 10px;
  height: 8px;
}
//滚动条的滑块
::-webkit-scrollbar-thumb {
  background-color: #dedfe0;
  border-radius: 3px;
}