【gde#27】若依生成的代码，修改成vue3风格

如果项目中使用的是vue3，那么若依生成的代码就没有办法直接使用，因为生成的代码是基于vue2，所以会有bug。为此我简单总结了一下，当我们拿到若依生成的代码时，需要如何修改才能使之可用。

 

1.修改scope风格

<template slot-scope="scope">
修改成
<template #default="scope">

 

2.按钮修改

<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
其中的el-icon-refresh，修改成Refresh，类似这种首字母大写的单词形式
el-icon-plus，改成Plus这样

　

3.分页需要处理

<pagination

  v-show="total>0"

  :total="total"

  :page.sync="queryParams.pageNum"

  :limit.sync="queryParams.pageSize"

  @pagination="getList"

/>

 

<el-pagination

    v-show="total>0"

    :total="total"

    v-model:current-page="queryParams.pageNum"

    :pager-count="queryParams.pageSize"

    @current-change="getList"

/>

 

4.需要修改dialog的显示

  :visible.sync="open"  替换成  v-model="open"   换成  

<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>

修改成

<el-dialog :title="title" v-model="open" width="600px" Lineend-to-body>

 

这个是比较合适的，在1080p的屏幕上

<el-dialog :title="title" v-model="open" width="600px" append-to-body>

  <el-form ref="form" :model="form" :rules="rules" label-width="120px">

 

5.删除无用的按钮

批量修改没有必要，删除

导出功能也没有必要，删除

 

 

这样基本就ok了，其他的部分自己看着改，再结合百度或者官网文档即可。