开源框架EL-ADMIN开发自己的 web应用（4）-代码生成器形成的页面的修改

第（3）节，我们讲了使用代码生成器中的一个坑，这一节我们使用新的数据表，如下图：

注意仅仅将主键名改为id，如果主键名想用特殊的名子，比如job_id,请参照第（3）节对代码生成器生成的代码进行修改。好了，采用新的数据表，我们利用代码生成器生成界面，不会的小伙伴请回看第（2）节内容。可以生成如下界面：

而我们回看，eladmin中点击系统管理->岗位管理，也就是我们模仿其数据表形成的界面，它长这样：

我们可以看到与“我的岗位管理”有一些不同(已标红）：

• 岗位状态搜索不是下拉框
• 时间搜索框没有
• 列表内容中状态不是switch按钮的形式

1.修改岗位状态搜索框为下拉框

修改的方式很简单，对比两者有什么不同，对照修改即可，首先看看eladmin中"岗位管理”界面是怎么做的，界面的岗位状态搜索框在组件中，而在"./module/header"中，如下图:

打开看看header.vue：

直接把该段代码，拷贝到"我的岗位管理”相应位置就好，原来的代码我注释掉，以便于看清改动了什么

保存，现在再打开“我的岗位管理”界面，可以看到岗位状态搜索已经变成下拉框了：

点击相应的“启用”或者“停用”，可以看到列表页也会相应进行查询。这里大家可能有些疑问，粘贴过来的代码中dict是哪里引入的，dict中有些什么内容:

通常遇到这个问题，我是这样做的，直接在下面加一段“{{dict}}"，如下图

然后保存刷新页面看看显示什么内容:

可以看到dict其实是一个json格式的对象，包含了eladmin中字典的内容(系统管理->字典管理），而这个dict对象是在哪里引入的呢？这个引入是在main.js中:

感兴趣的同学，可以深入研究一下dict在eladmin中是如何定义的，在此就不再赘述。

2、修改时间搜索框

还是看看"岗位管理“中对于时间搜索框的定义是怎样的，还是在header.vue中寻找答案：

对应修改“我的岗位管理”中的源码：

注意将中的start-placeholder改为"开始日期“，end-placeholder改为"结束日期”，此时时间搜索框也改好了：

3、修改列表中状态列为switch按钮形式

同样参考"岗位管理”页面的写法，如下图

注意这里有一个函数changeEnabled(),需要在methods{}中增加相应的内容，总之对照着改就对了，错了再处理，我们不可能一开始就想到所有的错误不是吗？
现在修改“我的岗位管理”界面中相应的内容

此时保存，再刷新页面就可以看到状态列表项已经改为了switch按钮形式了。

但是我们发现一个问题，那就是点击其中一个switch按钮，好像没有变化，这是因为有些地方需要相应做出修改：

因为模块变了，所以crudJob需要改为crudMyJob。此时保存再刷新就终于可以看到我们想要的界面了。

总结

开源框架的界面设计一般都是这样参考源代码，然后做小小的修改，这样改动代价最小，同时还可以深入理解源代码，为后面的修改提供便利，当然有些复杂的设计就需要推倒重来，但是eladmin几乎覆盖了我们想要的所有界面形式，我们不需要从0开始。好了，这一节到此结束！后面一节还会涉及到更重要的功能重建，喜欢的请给我点赞，你们的支持是我更新的动力！