vue统一配置和大量重复代码的处理建议

建议 未结 4 1078
光之翼
光之翼 2018-08-03
悬赏:20积分
我是vue的初学者,用这套框架学习起来非常棒!!! 在学习本框架的vue前端的时候发现,页面代码中有大量重复的代码,例如每个页面都有getDataList,sizeChangeHandle等重复方法,el-table的属性:data,border在每个页面有都是重复的,这样做的话有2个方面的缺点: 1、增加的代码的复杂程度 2、维护成本比较高(如果要在在这些重复的代码中统一增加新功能,所有的地方都需要改) 做为初学者,我想到的方案是设计自己的基础组件,将重复的部分放入基础组件,将变化的部分放出来,例如我尝试做了一个基础的表格分页组件,使页面简化如下: (face[嘻嘻] PS:因为是初学vue,想法不够成熟,如果有更好的方案处理此类问题,请告知) <template> <div class="mod-config"> <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()"> <el-form-item> <el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input> </el-form-item> <el-form-item> <el-button @click="getDataList()">查询</el-button> <el-button v-if="isAuth('generator:infojbxx:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button> <el-button v-if="isAuth('generator:infojbxx:delete')" type="danger" @click="delItem()" :disabled="selCount <= 0 ">批量删除</el-button> </el-form-item> </el-form> <basePaginationTable ref="chilTable" :listUrl="listUrl" :delUrl="delUrl" :dataForm="dataForm" @selcount="selcount" > <baseTableColumn type="selection" width="50"></baseTableColumn> <baseTableColumn prop="infoId" label="信息ID"></baseTableColumn> <baseTableColumn prop="xxbt" label="标题"></baseTableColumn> <baseTableColumn prop="xxnr" label="信息内容"></baseTableColumn> <baseTableColumn prop="xxlx" label="信息类型"></baseTableColumn> <baseTableColumn prop="czr" label="操作人"></baseTableColumn> <baseTableColumn prop="sxr" label="收信人"></baseTableColumn> <baseTableColumn prop="fssj" label="发信时间"></baseTableColumn> <baseTableColumn prop="dqzt" label="当前状态"></baseTableColumn> <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作"> <template slot-scope="scope"> <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.infoId)">修改</el-button> <el-button type="text" size="small" @click="delItem(scope.row.infoId)">删除</el-button> </template> </el-table-column> </basePaginationTable> <!-- 弹窗, 新增 / 修改 --> <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update> </div> </template> <script> import AddOrUpdate from './infojbxx-add-or-update' export default { // 数据 data () { return { addOrUpdateVisible: false, dataForm: { key: '' }, listUrl:"/generator/infojbxx/list", delUrl: "/generator/infojbxx/delete", selCount:0 } }, // 组件 components: { AddOrUpdate }, // 组件方法 methods: { getDataList(){ return this.$refs.chilTable.getDataList() }, delItem(id){ this.$refs.chilTable.deleteHandle(id) }, selcount(count){ this.selCount = count }, // 新增 / 修改 addOrUpdateHandle (id) { this.addOrUpdateVisible = true this.$nextTick(() => { this.$refs.addOrUpdate.init(id) }) } } } </script>
回帖
  • 感谢您的建议。 建议中提到的存在很多重复代码,我们也尝试通过vue 混入 (mixins)处理过。但效果并不是很理想,因为每个业务还是会存在需要不同方式的处理。 其实项目是有提供“在线代码生成器”,通过它可以快速生成基础业务的。所以我们暂时没有提供公共组件 或者 mixins之内的处理。
    0 回复
  • @daxiong 您好,企业版前后分离的默认生成代码添加删除组件的时候加载页面出错,可否连packge.json一起更新下?img[//cdn.renren.io/5ea14201808051524542509.png]
    0 回复
  • @saintloong 亲,你这个报错应该是http请求赋值的时候报的错。 与packge.json没有相关联吧!
    0 回复
  • 光之翼
    光之翼 (楼主)
    2018-08-06
    @daxiong 谢谢大神,我自己先研究一下
    0 回复