diff --git a/pigx-common/pigx-common-core/src/main/java/com/pig4cloud/pigx/common/core/constant/enums/StyleTypeEnum.java b/pigx-common/pigx-common-core/src/main/java/com/pig4cloud/pigx/common/core/constant/enums/StyleTypeEnum.java
new file mode 100644
index 000000000..0e776f828
--- /dev/null
+++ b/pigx-common/pigx-common-core/src/main/java/com/pig4cloud/pigx/common/core/constant/enums/StyleTypeEnum.java
@@ -0,0 +1,33 @@
+package com.pig4cloud.pigx.common.core.constant.enums;
+
+import lombok.AllArgsConstructor;
+import lombok.Getter;
+
+/**
+ * @author lengleng
+ * @date 2020-01-19
+ * <p>
+ * 前端类型类型
+ */
+@Getter
+@AllArgsConstructor
+public enum StyleTypeEnum {
+	/**
+	 * 前端类型-avue 风格
+	 */
+	AVUE("0", "avue 风格"),
+
+	/**
+	 * 前端类型-element 风格
+	 */
+	ELEMENT("1", "element 风格");
+
+	/**
+	 * 类型
+	 */
+	private String style;
+	/**
+	 * 描述
+	 */
+	private String description;
+}
diff --git a/pigx-visual/pigx-codegen/src/main/java/com/pig4cloud/pigx/codegen/entity/GenConfig.java b/pigx-visual/pigx-codegen/src/main/java/com/pig4cloud/pigx/codegen/entity/GenConfig.java
index cb270c897..579c45730 100644
--- a/pigx-visual/pigx-codegen/src/main/java/com/pig4cloud/pigx/codegen/entity/GenConfig.java
+++ b/pigx-visual/pigx-codegen/src/main/java/com/pig4cloud/pigx/codegen/entity/GenConfig.java
@@ -56,4 +56,11 @@ public class GenConfig {
 	 * 表备注
 	 */
 	private String comments;
+
+	/**
+	 * 代码风格
+	 * 0 - avue
+	 * 1 - element
+	 */
+	private String style;
 }
diff --git a/pigx-visual/pigx-codegen/src/main/java/com/pig4cloud/pigx/codegen/service/impl/GenFormConfServiceImpl.java b/pigx-visual/pigx-codegen/src/main/java/com/pig4cloud/pigx/codegen/service/impl/GenFormConfServiceImpl.java
index 690c4c465..ef7df6c9a 100755
--- a/pigx-visual/pigx-codegen/src/main/java/com/pig4cloud/pigx/codegen/service/impl/GenFormConfServiceImpl.java
+++ b/pigx-visual/pigx-codegen/src/main/java/com/pig4cloud/pigx/codegen/service/impl/GenFormConfServiceImpl.java
@@ -78,7 +78,7 @@ public class GenFormConfServiceImpl extends ServiceImpl<GenFormConfMapper, GenFo
 		Properties prop = new Properties();
 		prop.put("file.resource.loader.class", ClasspathResourceLoader.class.getName());
 		Velocity.init(prop);
-		Template template = Velocity.getTemplate("template/crud.js.vm", CharsetUtil.UTF_8);
+		Template template = Velocity.getTemplate("template/avue/crud.js.vm", CharsetUtil.UTF_8);
 		VelocityContext context = new VelocityContext();
 
 		List<ColumnEntity> columnList = new ArrayList<>();
diff --git a/pigx-visual/pigx-codegen/src/main/java/com/pig4cloud/pigx/codegen/util/GenUtils.java b/pigx-visual/pigx-codegen/src/main/java/com/pig4cloud/pigx/codegen/util/GenUtils.java
index 26a55a4bf..73e03c9ac 100644
--- a/pigx-visual/pigx-codegen/src/main/java/com/pig4cloud/pigx/codegen/util/GenUtils.java
+++ b/pigx-visual/pigx-codegen/src/main/java/com/pig4cloud/pigx/codegen/util/GenUtils.java
@@ -26,6 +26,7 @@ import com.pig4cloud.pigx.codegen.entity.GenConfig;
 import com.pig4cloud.pigx.codegen.entity.GenFormConf;
 import com.pig4cloud.pigx.codegen.entity.TableEntity;
 import com.pig4cloud.pigx.common.core.constant.CommonConstants;
+import com.pig4cloud.pigx.common.core.constant.enums.StyleTypeEnum;
 import com.pig4cloud.pigx.common.core.exception.CheckedException;
 import lombok.SneakyThrows;
 import lombok.experimental.UtilityClass;
@@ -63,11 +64,19 @@ public class GenUtils {
 	private final String CONTROLLER_JAVA_VM = "Controller.java.vm";
 	private final String MAPPER_XML_VM = "Mapper.xml.vm";
 	private final String MENU_SQL_VM = "menu.sql.vm";
-	private final String INDEX_VUE_VM = "index.vue.vm";
-	private final String API_JS_VM = "api.js.vm";
-	private final String CRUD_JS_VM = "crud.js.vm";
+	private final String AVUE_INDEX_VUE_VM = "avue/index.vue.vm";
+	private final String ELE_INDEX_VUE_VM = "element/index.vue.vm";
+	private final String ELE_ADD_UPDATE_VUE_VM = "element/add-or-update.vue.vm";
+	private final String AVUE_API_JS_VM = "avue/api.js.vm";
+	private final String AVUE_CRUD_JS_VM = "avue/crud.js.vm";
 
-	private List<String> getTemplates() {
+	/**
+	 * 配置
+	 *
+	 * @param config
+	 * @return
+	 */
+	private List<String> getTemplates(GenConfig config) {
 		List<String> templates = new ArrayList<>();
 		templates.add("template/Entity.java.vm");
 		templates.add("template/Mapper.java.vm");
@@ -76,10 +85,16 @@ public class GenUtils {
 		templates.add("template/ServiceImpl.java.vm");
 		templates.add("template/Controller.java.vm");
 		templates.add("template/menu.sql.vm");
+		templates.add("template/avue/api.js.vm");
+
+		if (StyleTypeEnum.ELEMENT.getStyle().equals(config.getStyle())) {
+			templates.add("template/element/index.vue.vm");
+			templates.add("template/element/add-or-update.vue.vm");
+		} else {
+			templates.add("template/avue/index.vue.vm");
+			templates.add("template/avue/crud.js.vm");
+		}
 
-		templates.add("template/index.vue.vm");
-		templates.add("template/api.js.vm");
-		templates.add("template/crud.js.vm");
 		return templates;
 	}
 
@@ -199,10 +214,10 @@ public class GenUtils {
 		VelocityContext context = new VelocityContext(map);
 
 		//获取模板列表
-		List<String> templates = getTemplates();
+		List<String> templates = getTemplates(genConfig);
 		for (String template : templates) {
 			// 如果是crud
-			if (template.contains(CRUD_JS_VM) && formConf != null) {
+			if (template.contains(AVUE_CRUD_JS_VM) && formConf != null) {
 				zip.putNextEntry(new ZipEntry(Objects
 						.requireNonNull(getFileName(template, tableEntity.getCaseClassName()
 								, map.get("package").toString(), map.get("moduleName").toString()))));
@@ -293,20 +308,25 @@ public class GenUtils {
 			return className.toLowerCase() + "_menu.sql";
 		}
 
-		if (template.contains(INDEX_VUE_VM)) {
+		if (template.contains(AVUE_INDEX_VUE_VM) || template.contains(ELE_INDEX_VUE_VM)) {
 			return CommonConstants.FRONT_END_PROJECT + File.separator + "src" + File.separator + "views" +
 					File.separator + moduleName + File.separator + className.toLowerCase() + File.separator + "index.vue";
 		}
 
-		if (template.contains(API_JS_VM)) {
+		if (template.contains(AVUE_API_JS_VM)) {
 			return CommonConstants.FRONT_END_PROJECT + File.separator + "src" + File.separator + "api" + File.separator + className.toLowerCase() + ".js";
 		}
 
-		if (template.contains(CRUD_JS_VM)) {
+		if (template.contains(AVUE_CRUD_JS_VM)) {
 			return CommonConstants.FRONT_END_PROJECT + File.separator + "src" + File.separator + "const" +
 					File.separator + "crud" + File.separator + className.toLowerCase() + ".js";
 		}
 
+		if (template.contains(ELE_ADD_UPDATE_VUE_VM)) {
+			return CommonConstants.FRONT_END_PROJECT + File.separator + "src" + File.separator + "views" +
+					File.separator + moduleName + File.separator + className.toLowerCase() + File.separator + moduleName + "-add-or-update.vue";
+		}
+
 		return null;
 	}
 }
diff --git a/pigx-visual/pigx-codegen/src/main/resources/template/api.js.vm b/pigx-visual/pigx-codegen/src/main/resources/template/avue/api.js.vm
similarity index 100%
rename from pigx-visual/pigx-codegen/src/main/resources/template/api.js.vm
rename to pigx-visual/pigx-codegen/src/main/resources/template/avue/api.js.vm
diff --git a/pigx-visual/pigx-codegen/src/main/resources/template/crud.js.vm b/pigx-visual/pigx-codegen/src/main/resources/template/avue/crud.js.vm
similarity index 100%
rename from pigx-visual/pigx-codegen/src/main/resources/template/crud.js.vm
rename to pigx-visual/pigx-codegen/src/main/resources/template/avue/crud.js.vm
diff --git a/pigx-visual/pigx-codegen/src/main/resources/template/index.vue.vm b/pigx-visual/pigx-codegen/src/main/resources/template/avue/index.vue.vm
similarity index 100%
rename from pigx-visual/pigx-codegen/src/main/resources/template/index.vue.vm
rename to pigx-visual/pigx-codegen/src/main/resources/template/avue/index.vue.vm
diff --git a/pigx-visual/pigx-codegen/src/main/resources/template/element/add-or-update.vue.vm b/pigx-visual/pigx-codegen/src/main/resources/template/element/add-or-update.vue.vm
new file mode 100644
index 000000000..bef510cdb
--- /dev/null
+++ b/pigx-visual/pigx-codegen/src/main/resources/template/element/add-or-update.vue.vm
@@ -0,0 +1,86 @@
+<template>
+  <el-dialog
+    :title="!dataForm.id ? '新增' : '修改'"
+    :close-on-click-modal="false"
+    :visible.sync="visible">
+    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
+#foreach($column in $columns)
+#if($column.columnName != $pk.columnName)
+    <el-form-item label="${column.comments}" prop="${column.lowerAttrName}">
+      <el-input v-model="dataForm.${column.lowerAttrName}" placeholder="${column.comments}"></el-input>
+    </el-form-item>
+#end
+#end
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">取消</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+    import {getObj, addObj, putObj} from '@/api/${pathName}'
+
+    export default {
+    data () {
+      return {
+        visible: false,
+        dataForm: {
+#foreach($column in $columns)
+#if($column.columnName == $pk.columnName)
+          ${column.lowerAttrName}: 0,
+#else
+          ${column.lowerAttrName}: ''#if($velocityCount != $columns.size()),#end
+
+#end
+#end
+        },
+        dataRule: {
+#foreach($column in $columns)
+#if($column.columnName != $pk.columnName)
+          ${column.lowerAttrName}: [
+            { required: true, message: '${column.comments}不能为空', trigger: 'blur' }
+          ]#if($velocityCount != $columns.size()),#end
+
+#end
+#end
+        }
+      }
+    },
+    methods: {
+      init (id) {
+        this.dataForm.${pk.lowerAttrName} = id || 0
+        this.visible = true
+        this.$nextTick(() => {
+          this.$refs['dataForm'].resetFields()
+          if (this.dataForm.${pk.lowerAttrName}) {
+            getObj(this.dataForm.${pk.lowerAttrName}).then(response => {
+                this.dataForm = response.data.data
+            })
+          }
+        })
+      },
+      // 表单提交
+      dataFormSubmit () {
+        #[[this.$refs['dataForm'].validate((valid) => {]]#
+          if (valid) {
+            if (this.dataForm.${pk.lowerAttrName}) {
+                putObj(this.dataForm).then(data => {
+                    this.$message.success('修改成功')
+                    this.visible = false
+                    this.$emit('refreshDataList')
+                });
+            } else {
+                addObj(this.dataForm).then(data => {
+                    this.$message.success('添加成功')
+                    this.visible = false
+                    this.$emit('refreshDataList')
+                })
+            }
+          }
+        })
+      }
+    }
+  }
+</script>
diff --git a/pigx-visual/pigx-codegen/src/main/resources/template/element/index.vue.vm b/pigx-visual/pigx-codegen/src/main/resources/template/element/index.vue.vm
new file mode 100644
index 000000000..ed318be3a
--- /dev/null
+++ b/pigx-visual/pigx-codegen/src/main/resources/template/element/index.vue.vm
@@ -0,0 +1,126 @@
+<template>
+  <div class="mod-config">
+    <basic-container>
+      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+        <el-form-item>
+          <el-button v-if="permissions.${moduleName}_${pathName}_add" icon="el-icon-plus" type="primary" @click="addOrUpdateHandle()">新增</el-button>
+        </el-form-item>
+      </el-form>
+
+      <div class="avue-crud">
+        <el-table
+                :data="dataList"
+                border
+                v-loading="dataListLoading">
+          #foreach($column in $columns)
+            <el-table-column
+                    prop="${column.lowerAttrName}"
+                    header-align="center"
+                    align="center"
+                    label="${column.comments}">
+            </el-table-column>
+          #end
+          <el-table-column
+                  header-align="center"
+                  align="center"
+                  label="操作">
+            <template slot-scope="scope">
+              <el-button v-if="permissions.${moduleName}_${pathName}_edit" type="text" size="small" icon="el-icon-edit" @click="addOrUpdateHandle(scope.row.${pk.lowerAttrName})">修改</el-button>
+              <el-button v-if="permissions.${moduleName}_${pathName}_del" type="text" size="small" icon="el-icon-delete" @click="deleteHandle(scope.row.${pk.lowerAttrName})">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
+      <div class="avue-crud__pagination">
+        <el-pagination
+                @size-change="sizeChangeHandle"
+                @current-change="currentChangeHandle"
+                :current-page="pageIndex"
+                :page-sizes="[10, 20, 50, 100]"
+                :page-size="pageSize"
+                :total="totalPage"
+                background
+                layout="total, sizes, prev, pager, next, jumper">
+        </el-pagination>
+      </div>
+      <!-- 弹窗, 新增 / 修改 -->
+      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+    </basic-container>
+  </div>
+</template>
+
+<script>
+  import {fetchList, delObj} from '@/api/${pathName}'
+  import AddOrUpdate from './${pathName}-add-or-update'
+  import {mapGetters} from 'vuex'
+  export default {
+    data () {
+      return {
+        dataForm: {
+          key: ''
+        },
+        dataList: [],
+        pageIndex: 1,
+        pageSize: 10,
+        totalPage: 0,
+        dataListLoading: false,
+        addOrUpdateVisible: false
+      }
+    },
+    components: {
+      AddOrUpdate
+    },
+    created () {
+      this.getDataList()
+    },
+    computed: {
+      ...mapGetters(['permissions'])
+    },
+    methods: {
+      // 获取数据列表
+      getDataList () {
+        this.dataListLoading = true
+        fetchList(Object.assign({
+          current: this.pageIndex,
+          size: this.pageSize
+        })).then(response => {
+          this.dataList = response.data.data.records
+          this.totalPage = response.data.data.total
+        })
+        this.dataListLoading = false
+      },
+      // 每页数
+      sizeChangeHandle (val) {
+        this.pageSize = val
+        this.pageIndex = 1
+        this.getDataList()
+      },
+      // 当前页
+      currentChangeHandle (val) {
+        this.pageIndex = val
+        this.getDataList()
+      },
+      // 新增 / 修改
+      addOrUpdateHandle (id) {
+        this.addOrUpdateVisible = true
+        #[[this.$nextTick(() => {]]#
+          this.$refs.addOrUpdate.init(id)
+        })
+      },
+      // 删除
+      deleteHandle (id) {
+        this.$confirm('是否确认删除ID为' + id, '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(function () {
+          return delObj(id)
+        }).then(data => {
+          this.$message.success('删除成功')
+          this.getDataList()
+        })
+      }
+    }
+  }
+</script>