vue-element-admin 问题集锦

vue tytrock ⋅ 于 2020-04-25 17:42:15 ⋅ 1813 阅读

1、el-dialog中的form使用resetFields报错“Cannot read property 'resetFields' of undefined”

原因是在弹窗新增对话框前 form表单并没有编译渲染进dom里面 所以导致this.$refs['form'].resetFields(); 报错 

解决方法:

this.$nextTick(()=>{
    this.$refs['formData'].resetFields();
})


2、使用el-dialog新增和编辑时,本来已在data里定义了表单各项数据的原始值,编辑后点击新增,表单无法重置

原因是form表单的重置是以第一次打开的数据作为重置标准,如果先打开的是编辑,那么重置是以本次编辑的数据数据作为标准

解决方法:

1、编辑时,先让el-dialog显示,再使用setTimeout延迟赋值编辑数据,这样使得编辑时的form表单第一次打开的数据为原始数据

this.formVisible = true;
setTimeout(()=>{
    this.formData.id = row.id
    this.formData.name = row.name;
    ...
},100);

2、在关闭el-dialog时重置表单数据

closeForm(){
    this.$refs['form'].resetFields();
}


3、点击侧边栏 刷新当前路由

解决方法:

点击侧边栏菜单时,先跳转到Redirect 页面,在Redirect页面再将路由重定向到想去的页面,这样就起到了刷新的效果了。

Redirect页面和路由配置admin后台自带的有,只需修改 @/views/layout/components/Sidebar/Link.vue 文件 中的 linkProps

<template>
  <!-- eslint-disable vue/require-component-is -->
  <component v-bind="linkProps(to)">
    <slot />
  </component>
</template>

<script>
import { isExternal } from '@/utils/validate'

export default {
  props: {
    to: {
      type: String,
      required: true
    }
  },
  methods: {
    linkProps(url) {
      if (isExternal(url)) {
        return {
          is: 'a',
          href: url,
          target: '_blank',
          rel: 'noopener'
        }
      }
      return {
        is: 'router-link',
        to: '/redirect' + url //在url前加上/redirect即可
      }
    }
  }
}
</script>


4、el-table里利用index进行排名的显示

el-table-column 里使用type="index"可以获取到当前行的行数,但翻页会重置行数,也就是第二页后行数也是从1开始,如果要做排名的显示显然不合适,这时可以使用方法实时改变翻页的index

<el-table-column type="index" :index="indexMethod" width="50" ></el-table-column>

....
indexMethod(index) {
    return (this.listQuery.page-1)*this.listQuery.limit+index+1;
}


5、自定义el-table默认的暂无数据显示

在与el-table-column同级加上一个slot="empty"的template即可

<el-table-column>
    <template slot="empty">
        <p>我是自定义暂无数据</p>
    </template>
</el-table-column>



回复数量: 0
    暂无评论~~
    • 请注意单词拼写,以及中英文排版,参考此页
    • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`, 更多语法请见这里 Markdown 语法
    • 支持表情,使用方法请见 Emoji 自动补全来咯,可用的 Emoji 请见 :metal: :point_right: Emoji 列表 :star: :sparkles:
    • 上传图片, 支持拖拽和剪切板黏贴上传, 格式限制 - jpg, png, gif
    • 发布框支持本地存储功能,会在内容变更时保存,「提交」按钮点击时清空
    Ctrl+Enter