使用vscode如何设置 vue模板（纯净模板+新增，编辑，删除模板）

1.文件--》首先项--》用户代码片段--》选择 vue.json

2.复制下面代码直接 ctrl+a 替换就好

{
	"Print to console": {        
    "prefix": "vue",        
    "body": [          
        "<template>",          
        "   <div></div>",          
        "</template>",          
        "",
        "<script>",          
        "export default {",
        "   name:'',",
        "   data () {",
        "      return {",
        "",
        "      };",
        "   },",
        "",
        "",
        "   mounted() {},",
        "",
        "   methods: {}",
        "}",
        "</script>",
        "<style lang='css' scoped>",
        "",
        "</style>"
  ],
  "description": "纯净页面"
},

"vue-add": {        
  "prefix": "vue-add",        
  "body": [          
      "<template>",          
      "   <div>",
      "  <el-form :inline='true'  ref='formInline' :model='formInline' style='margin-bottom: 8px;' class='demo-form-inline form_inline_search' >",
      "    <el-row>",
      "      <el-col :span='16'>",
      "         <div style='width:100%;height:50px;'>",
      "             <el-form-item label='名称' prop='name'>",
      "                  <el-input type='text' v-model.trim='formInline.name' clearable placeholder='请输入名称' size='small'></el-input>",
      "              </el-form-item>",
      "         </div>",
      "      </el-col>",
      "      <el-col :span='8'>",
      "         <el-form-item class='search_button_com'>"
      "            <el-button type='primary' @click='onSubmit(true)' style='margin-bottom: 5px;' size='small'><i class='el-icon-search'></i>查询</el-button>",
      "            <el-button type='primary' plain  @click='addData()' style='margin-bottom: 5px;' size='small'><i class='el-icon-circle-plus-outline'></i>新增</el-button>",
      "            <el-button type='danger' plain @click='deleteData()' style='margin-bottom: 5px; ' size='small'><i class='el-icon-delete'></i>删除</el-button>",
      "        </el-form-item>",
      "      </el-col>",
      "    </el-row>",
      "  </el-form>",
      "   <div class='forms_table_title'>",
      "       <i class='el-icon-s-data'></i>列表",
      "   </div> ",
      "   <el-table",
      "     ref='multipleTable'",
      "     @selection-change='handleSelectionChange'",
      "     :data='tableData'",
      "     border",
      "     stripe",
      "     v-loading='tableLoading'",
      "     style='width: 100%'",
      "    >",
      "     <el-table-column fixed type='selection' width='35'></el-table-column>",
      "     <el-table-column",
      "       prop='name'",
      "       sortable='custom'",
      "       show-overflow-tooltip",
      "       label='名称'",
      "       min-width='100'",
      "       algin='left'",
      "       header-align='center'",
      "      >",
      "          <template slot-scope='scope'>",
      "             <span >{{ scope.row.name| noDataFilter }}</span>",
      "          </template>",
      "      </el-table-column>",
      "      <el-table-column label='操作' fixed='right' min-width='120' align='center'>",
      "          <template slot-scope='scope'>",
      "             <el-button type='primary' size='small' @click='editData(scope.row)'>编辑</el-button>",
      "             <el-button type='danger' plain size='small' @click='delData(scope.row)'>删除</el-button>",
      "          </template>",
      "       </el-table-column>",
      "     </el-table>",
      "     <Pagination :total = 'total' :page = 'formInline.pageNum'   :limit = 'formInline.pageSize'  @pagination='Pagination'></Pagination>",
      "     <!-- 新增、编辑 -->",
      "       <el-dialog ",
      "          :title='countTitle' customClass='MyWidth'   center :visible.sync='countDialog' ",
      "          :close-on-click-modal='false'>",
      "          <el-container style='height:241px;'>",
      "             <el-main class='mainBox'>",
      "                <el-form",
      "                  :inline='true'",
      "                  ref='formCount'",
      "                  :model='formCount'",
      "                  :rules='countRules'",
      "                  label-position='right'",
      "                >",
      "                   <el-form-item  label='名称'  prop='name' class='mb20' :label-width='formLabelWidth'>",
      "                      <el-input  type='text'   v-model.trim='formCount.name' clearable placeholder='请填写名称' size='small'></el-input>",
      "                  </el-form-item>",
      "               </el-form>",
      "             </el-main>",
      "          </el-container>",
      "              <div slot='footer' class='dialog-footer'>",
      "                 <el-button size='small' @click='countDialog = false'>取 消</el-button>",
      "                 <el-button type='primary' size='small' :loading='countSubmit_btn' @click='countSubmit()'>确 定</el-button>",
      "             </div>",
      "       </el-dialog>",
      "   </div>",          
      "</template>",          
      "",
      "<script>",  
      "import Pagination from '@/components/Pagination'",
      "import commonFun from '@/filters/new_common'",
      "import pageApi from '@/api/xx/xx';",        
      "export default {",
      "   name:'',",
      "   components: {Pagination},",
      "   data () {",
      "      return {",
      "         formInline:{",
      "            name:'',",
      "            pageSize: 10,",
      "            pageNum:1",
      "         },",
      "         tableData: [], //表格数据",
      "         tableLoading: false, //表格加载",
      "         tableMultipleSelection: [],//表格选择数据集合",
      "         total:0,//总条数",
      "         countDialog: false, // 弹窗",
      "         countTitle:'',//标题",
      "         countFormList:'',//是新增还是编辑",
      "         // 新增 编辑",
      "         formCount: {",
      "            name:'',//名称",
      "         },",
      "          // 操作类型 1、添加 2、编辑",
      "         operationType: 1,",
      "         // 弹窗验证规则",
      "         countRules: {",
      "             name: [",
      "               { required: true, type: 'string', message: '请输入名称', trigger: 'bulr' }",
      "             ],",
      "          },",
      "         formLabelWidth: '150px',",
      "         countSubmit_btn:false",
      "      };",
      "   },",
      "",
      "",
      "   mounted() {},",
      "",
      "   methods: {",
      "     // 查询 ",
      "      onSubmit(flag){",
      "         this.tableLoading = true;",
      "         // 消除没有值的参数",
      "         if(flag){",
      "             this.formInline.pageNum = 1;",
      "         }",
      "         let params = commonFun.parameterSrc(this.formInline);",
  
      "         pageApi.getDataSourceList(params).then(response => { ",
      "            if(!response.data.error){ ",
      "                this.tableData = response.data.data.list; ",
      "                 // 页面总条数 ",
      "                this.total = response.data.data.total; ",
      "             } ",
      "             else{ ",
      "                this.tableData = []; ",
      "                this.total = 0; ",
      "                this.formInline.pageSize = 10; ",
      "                this.formInline.pageNum = 1; ",
      "            } ",
      "                this.tableLoading = false; ",
      "            }).catch(() => { ",
      "                this.tableData = []; ",
      "                this.total = 0; ",
      "                this.formInline.pageSize = 10;",
      "                this.formInline.pageNum = 1;",
      "                this.tableLoading = false;",
      "      })",
          
      "    },",
      "    //分页",
      "    Pagination(val){",
      "       this.formInline.pageSize = val.limit;//页面条数",
      "       this.formInline.pageNum = val.page;//页面",
      "       this.onSubmit(false);",
      "    },",
      "     // table批量选择结果",
      "    handleSelectionChange(val) {",
      "       this.tableMultipleSelection = val;",
      "    },",
      "    //新增数据",
      "    addData(){",
      "        this.countTitle = '新增';",
      "        this.countFormList = 'add';",
      "        this.countDialog = true;",
      "        this.operationType =1;",
  
      "        // 清除",
      "        this.\\$nextTick(() => {",
      "           this.\\$refs['formCount'].resetFields();",
      "           this.formCount.name= '';",
      "        });",
  
      "     },",
      "     // 行编辑数据",
      "     editData(row) {",
      "         this.countTitle = '编辑';",
      "         this.countFormList = 'edit';",
      "         this.countDialog = true;",
      "         this.operationType =2;",
  
      "         this.\\$nextTick(() => {",
      "             this.\\$refs['formCount'].resetFields();",
      "             this.formCount.name= row.name;",
      "         });",
      "     },",
      "    //新增计算任务确认",
      "     countSubmit(){",
      "         var self = this;",
      "         this.\\$refs['formCount'].validate((valid) => {",
      "             if (valid) {",
      "                this.\\$message.closeAll()",
      "                if (this.operationType === 1) {",
      "                     // 添加",
      "                     this.saveData();",
      "                } else {",
      "                     // 修改",
      "                     this.updateParamSet();",
      "             }",
      "             } else {",
      "                return false;",
      "             }",
      "        })",
      "     },",
      "     saveData(){",
      "          this.\\$confirm('确定新增?', '提示', {",
      "          confirmButtonText: '确定',",
      "          cancelButtonText: '取消',",
      "          type: 'warning'",
      "        })",
      "        .then(() => {",
      "            let params = {};",
      "            params = commonFun.parameterSrc(this.formCount);",
      "            this.countSubmit_btn = true;",
      "            pageApi.addDataSource(params).then(response => {",
      "            if(!response.data.error){",
      "               // 关闭移动指标弹框",
      "                this.countDialog = false;",
      "                this.\\$message.closeAll()",
      "                this.\\$message({",
      "                    message: '新增成功',",
      "                    type: 'success'",
      "                });",
      "               // 刷新列表",
  
      "               this.onSubmit(true);",
  
      "            }",
      "            else{",
      "                // 关闭移动指标弹框",
      "                this.countDialog = false;",
      "                this.\\$message.closeAll()",
      "                this.\\$message({",
      "                  message: response.data.error || '新增失败',",
      "                  type: 'warning'",
      "                });",
      "            }",
      "               this.countSubmit_btn = false;",
      "           }).catch(() => {",
      "               // 关闭移动指标弹框",
      "              this.countDialog = false;",
      "              this.countSubmit_btn = false;",
      "              this.\\$message.closeAll()",
      "              this.\\$message({",
      "                 message: '新增失败',",
      "                 type: 'warning'",
      "             });",
  
      "         })",
  
      "       })",
      "       .catch(() => {",
      "          // 关闭移动指标弹框",
      "          this.countDialog = false;",
      "          this.countSubmit_btn = false;",
      "        });",
      "    },",
      "   updateParamSet(){",
      "       this.\\$confirm('确定修改?', '提示', {",
      "       confirmButtonText: '确定',",
      "       cancelButtonText: '取消',",
      "       type: 'warning'",
      "       })",
      "       .then(() => {",
      "           let params = {};",
      "           params = commonFun.parameterSrc(this.formCount);",
      "           this.countSubmit_btn = true;",
      "           pageApi.updateDataSource(params).then(response => {",
      "               if(!response.data.error){",
      "                  // 关闭移动指标弹框 ",
      "                 this.countDialog = false;",
      "                 this.\\$message.closeAll()",
      "                 this.\\$message({",
      "                    message: '修改成功',",
      "                    type: 'success'",
      "                 });",
      "                 // 刷新树列表",
      "                 this.onSubmit(false);",
  
      "            }",
      "             else{",
      "                 // 关闭移动指标弹框",
      "                 this.countDialog = false;",
      "                 this.\\$message.closeAll()",
      "                 this.\\$message({",
      "                     message: response.data.error || '修改失败',",
      "                     type: 'warning'",
      "                 });",
      "             }",
      "               this.countSubmit_btn = false;",
      "           }).catch(() => {",
      "              // 关闭移动指标弹框",
      "               this.countDialog = false;",
      "               this.countSubmit_btn = false;",
      "               this.\\$message.closeAll()",
      "               this.\\$message({",
      "                  message: '修改失败',",
      "                  type: 'warning'",
      "                });",
      "           })",
  
      "        })",
      "         .catch(() => {",
      "           // 关闭移动指标弹框",
      "            this.countDialog = false;",
      "             this.countSubmit_btn = false;",
      "        });",
      "      },",
      "     // 按钮批量删除",
      "     deleteData(){",
      "         if(this.tableMultipleSelection.length === 0){",
      "             this.\\$message.closeAll()",
      "             this.\\$message({",
      "                message: '请选择要删除的数据',",
      "                type: 'warning'",
      "             });",
      "        }",
      "         else{",
      "             this.delData(this.tableMultipleSelection);",
      "        }",
      "   },",
      "   // 行删除数据",
      "   delData(row){",
      "     let id = [];",
      "     // 删除列的名称 ",
      "     if(row.length){",
      "        row.forEach(function(item){",
      "         id.push(item.id);",
      "       });",
      "     }",
      "      else{",
      "          id.push(row.id);",
      "      }",
      "      this.\\$confirm('确定删除?', '提示', {",
      "        confirmButtonText: '确定',",
      "        cancelButtonText: '取消',",
      "        type: 'warning'",
      "      })",
      "       .then(() => {",
      "            let params = {};",
      "            params['id'] = id.join(',');",
      "            pageApi.deleteDataSource(params).then(response => {",
      "            if(!response.data.error){",
      "                this.\\$message.closeAll()",
      "                this.\\$message({",
      "                    message: '删除成功',",
      "                    type: 'success'",
      "                 });",
      "                 // 刷新树列表",
      "                 this.onSubmit(false);",
  
      "            }",
      "           else{",
      "               this.\\$message.closeAll()",
      "               this.\\$message({",
      "                  message: response.data.error || '删除失败',",
      "                  type: 'warning'",
      "               });",
      "           }",
  
      "         }).catch(() => {",
      "         // 关闭移动指标弹框",
      "             this.\\$message.closeAll()",
      "             this.\\$message({",
      "                message: '删除失败',",
      "                type: 'warning'",
      "             });",
      "         })",
  
      "        })",
      "        .catch(() => {",
      "         });",
      "     }",

      " }",
      "}",
      "</script>",
      "<style lang='css' scoped>",
      "",
      "</style>",
      " <style>",
      "     .MyWidth{",
      "      width: 55% !important;",
      "    }",
      "    </style>",
      
],
"description": "简单新增编辑删除列表，只需要修改字段，接口等信息"
}

}

3.测试：新建一个vue文件，输入vue如下：

 

4.js文件

   4.1过滤器

 // 请求参数排除无意义的值 --》放入自己的公共js
  parameterSrc(data){
    let newData = {}
    for(let key in data){
      if(data[key] === '' || data[key] === undefined || data[key] === null){

      }
      else{
       newData[key] = data[key];
      }
    }
    return newData;
  }

// 数据为空显示 - 放入 filters--》index.js中
export function noDataFilter(n) {
  if (n === undefined || n === '' || n === null) {
    return '-';
  }
  else {
    return n;
  }
}

  4.2接口js,直接替换就好

import request from '~/assets/utils/request'

const qs = require('qs');
export default {

  // 查询所有 数据源设置
  getDataSourceList: async function (params) {
    return request({
      
      url: '/api/index/indPara/dict/list' + '?' + qs.stringify(params),
      method: 'get',
    })
  },
  // 添加 数据源设置
  addDataSource: async function (params) {
    return request({
     
      url: '/api/index/indPara/dict/add' + '?' + qs.stringify(params),
      method: 'post',
    })
  },
  // 修改 数据源设置
  updateDataSource: async function (params) {
    return request({
      
      url: '/api/index/indPara/dict/edit' + '?' + qs.stringify(params),
      method: 'post',
    })
  },
  // 删除单个  数据源设置
  deleteDataSource: async function (params) {
    return request({
     
      url: '/api/index/indPara/dict/del' + '?' + qs.stringify(params),
      method: 'post',
    })
  },
  // 批量删除  数据源设置
  batchDeleteDataSource: async function (params) {
    return request({
    
      url: '/api/etl/datasource/batchDeleteDataSource' + '?' + qs.stringify(params),
      method: 'post',
    })
  },
 

}