用element-ui的表格和表单结合写一个可编辑表格

约定不等于承诺〃 2022-12-20 02:58 296阅读 0赞

实现效果如下图：

在这里插入图片描述
在前面写了一个 vxe-table的插件，一个基于vue功能强大的表格组件（支持树形，编辑，增删改查以及校验等），也帮到了很多人解决工作中的问题，挺开心的；都说条条大路通罗马，同样的功能有很多实现方式，今天我们就一起看一下利用element-ui的表格和表单结合实现的可编辑表格，主要是记录一下自己用到的知识点，如果可以帮到你，我也很荣幸！

第一步：项目引进element

略，既然看到这里了，想必项目已经引入element-ui,也会怎么做，如果不会可以看 element-ui 官网

第二步：table.vue（可编辑表格）

  1. <template>
  2.  <div>
  3.   <el-form :model="config" ref="configTableForm">
  4.           <el-table 
  5.               header-row-class-name="header_row_style" 
  6.               :data="config.list" 
  7.               style="width: 100%" 
  8.               max-height="450">
  9.               <el-table-column    
  10.                   label="名称" 
  11.                   prop="code" 
  12.                   show-overflow-tooltip 
  13.                   width="80">
  14.               </el-table-column>
  15.               <el-table-column >
  16.                   <template slot-scope="scope">
  17.                       <el-form-item 
  18.                           :prop="'list.'+scope.$index+'.value'">
  19.                           <el-input 
  20.                              :disabled="scope.row.showType == 3 || scope.row.showType == 4? true : false"
  21.                               v-model.trim="scope.row.value" 
  22.                               size="mini" 
  23.                               placeholder="请填写值"></el-input>
  24.                       </el-form-item>
  25.                   </template>
  26.               </el-table-column>
  27.               <el-table-column 
  28.                   label="字段类型" 
  29.                   width="120" 
  30.                   show-overflow-tooltip>
  31.                   <template slot-scope="scope">
  32.                       { { scope.row.type}}
  33.                   </template>
  34.               </el-table-column>
  35.               <el-table-column label="查询名">
  36.                   <template slot-scope="scope">
  37.                       <el-form-item 
  38.                           :prop="'list.'+scope.$index+'.name'"
  39.                           :rules="[
  40.                               {  required: scope.row.input, message: '不能为空', trigger: 'blur' }]">
  41.                           <el-input 
  42.                              :disabled="scope.row.input ? false : true"
  43.                               placeholder="请输入查询名"
  44.                               v-model.trim="scope.row.name" 
  45.                               :maxlength="20"
  46.                               size="mini"></el-input>
  47.                       </el-form-item>
  48.                   </template>
  49.               </el-table-column>
  50.               <el-table-column label="长度" width="100">
  51.                   <template slot-scope="scope">
  52.                       <el-input-number 
  53.                           :min="0" 
  54.                           v-model="scope.row.length" 
  55.                           size="mini" 
  56.                           controls-position="right"></el-input-number>
  57.                   </template>
  58.               </el-table-column>
  59.               <el-table-column label="描述">
  60.                   <template slot-scope="scope">
  61.                       <el-input 
  62.                           placeholder="请输入描述"
  63.                           v-model.trim="scope.row.memo"
  64.                           size="mini"></el-input>
  65.                   </template>
  66.               </el-table-column>
  67.               <el-table-column label="是否排序" width="100">
  68.                  <template slot-scope="scope">
  69.                       <el-select 
  70.                           size="mini" 
  71.                           v-model="scope.row.sort" 
  72.                           @change="showModeChange(scope.row.sort, scope.$index)">
  73.                           <el-option label="无" value="0"></el-option>
  74.                           <el-option label="升序" value="1"></el-option>
  75.                           <el-option label="降序" value="2"></el-option>
  76.                       </el-select>
  77.                   </template>
  78.               </el-table-column>
  79.               <el-table-column label="输入" width="50">
  80.                   <template slot-scope="scope">
  81.                       <el-checkbox 
  82.                           v-model="scope.row.input" 
  83.                          ></el-checkbox>
  84.                   </template>
  85.               </el-table-column>
  86.               <el-table-column  width="80">
  87.                  <template slot="header" slot-scope="scope">
  89.                      <el-checkbox  v-model="AallOutput" @change="handleAllOutput"></el-checkbox>   
  90.                     <span>输出</span>              
  91.                  </template>
  92.                  <template slot-scope="scope">
  93.                       <el-checkbox 
  94.                           v-model="scope.row.output" 
  95.                          ></el-checkbox>
  96.                   </template>
  97.               </el-table-column>
  98.               <el-table-column label="是否必填" width="80">
  99.                   <template slot-scope="scope">
  100.                       <el-checkbox 
  101.                           v-model="scope.row.isMust" 
  102.                           :disabled="!scope.row.input"></el-checkbox>
  103.                   </template>
  104.               </el-table-column>
  105.               <el-table-column label="展示类型" width="100">
  106.                   <template slot-scope="scope">
  107.                       <el-select 
  108.                           size="mini" 
  109.                           :disabled="scope.row.input ? false : true"
  110.                           v-model="scope.row.showType" 
  111.                           @change="showModeChange(scope.row.showType, scope.$index)">
  112.                           <el-option label="文本" value="1"></el-option>
  113.                           <el-option label="数字" value="2"></el-option>
  114.                           <el-option label="日期" value="3"></el-option>
  115.                           <el-option label="下拉" value="4"  disabled></el-option>
  116.                       </el-select>
  117.                   </template>
  118.               </el-table-column>
  119.               <el-table-column label="查询方式" width="100">
  120.                   <template slot-scope="scope">
  121.                       <el-select 
  122.                           size="mini" 
  123.                           :disabled="scope.row.input ? false : true"
  124.                           v-model="scope.row.queryType">
  125.                           <el-option 
  126.                               label="模糊" 
  127.                               value="1" 
  128.                               :disabled="scope.row.displayType == 3 || scope.row.displayType == 4 ? true : false"></el-option>
  129.                           <el-option 
  130.                               label="精准" 
  131.                               value="2"></el-option>
  132.                           <el-option 
  133.                               label="区间" 
  134.                               value="3" 
  135.                               :disabled="scope.row.displayType == 1 || scope.row.displayType == 4 ? true : false"></el-option>
  136.                       </el-select>
  137.                   </template>
  138.               </el-table-column>
  139.           </el-table>
  140.    </el-form>
  141.     <div class="btns">
  142.            <el-button 
  143.                 type="primary"
  144.                 @click="submitConfig('configTableForm')">保存并确定</el-button>
  145.      </div>
  146.  </div>
  148. </template>
  150. <script>
  151.  export default { 
  152.   data(){ 
  153.       return{ 
  154.        // 配置列表
  155.         config: { 
  156.              list: []
  157.          },
  158.       }
  159.    },
  160.    mounted(){ 
  161.        this.getAllColumns()
  162.     },
  163.    methods:{ 
  164.       // 获取表格数据进行渲染
  165.       getAllColumns() {      
  166.             var data = this.$route.query
  167.             getTableDetail(data).then((res) => { 
  168.                 if (res.data.infoCode == 200) { 
  169.                     this.configData = new Array();
  170.                     for (let i = 0; i < res.data.data.length; i++) {            
  171.                             this.configData.push({ 
  172.                                 value: res.data.data[i].value || '',
  173.                                 sort:res.data.data[i].sort || '0',
  174.                                 input: res.data.data[i].input || false,
  175.                                 output: res.data.data[i].output || false,
  176.                                 isMust: res.data.data[i].isMust || false,
  177.                                 showType: res.data.data[i].showType || '1',
  178.                                 queryType: res.data.data[i].queryType || '1',
  179.                                 length: res.data.data[i].length,
  180.                                 code: res.data.data[i].columnName,
  181.                                 type: res.data.data[i].udtName || '',
  182.                                 id: res.data.data[i].id,
  183.                                 name: res.data.data[i].name,
  184.                                 memo: res.data.data[i].memo,
  185.                                 apiId: res.data.data[i].apiId,
  186.                                 relName:res.data.data[i].relName || '',
  187.                                 tableSchema:res.data.data[i].tableSchema,
  188.                                 tableName:res.data.data[i].tableName,
  190.                             });
  191.                     }
  192.                     this.$set(this.config, 'list', this.configData);
  193.                     this.$nextTick(function() { 
  194.                         this.$refs['configTableForm'].clearValidate();
  195.                     })
  196.                 } else { 
  197.                     this.$set(this.config, 'list', new Array());
  198.                 }
  199.             }).catch(() => {  })
  200.         },
  201.         //修改表格后提交
  202.        submitConfig(formName) { 
  203.             this.config.list.forEach(e => { 
  204.                 e.apiId = this.id
  205.             })
  206.             this.$refs[formName].validate((valid) => { 
  207.                 if (valid) { 
  208.                     saveApiColumns(this.config.list).then((res) => { 
  209.                         this.configLoading = false;
  210.                         if (res.data.infoCode == 200) { 
  211.                             this.$message({ 
  212.                                 type: 'success',
  213.                                 message: '配置成功'
  214.                             });
  215.                             this.$router.back(-1)
  216.                         } else { 
  217.                             this.$message({ 
  218.                                 type: 'error',
  219.                                 message: '配置失败！'+res.data.info
  220.                             });
  221.                             this.getAllColumns()
  222.                         }
  223.                     }).catch(() => { 
  225.                     })
  226.                 } else { 
  227.                     return false;
  228.                 }
  229.             });
  230.         },
  231.    }
  232.  }
  234. </script>

有点懒，就把自己项目的代码粘贴了一下，可以作为参考！

发表评论

表情：
评论列表 （有 0 条评论，296人围观）

还没有评论，来说两句吧...

相关阅读