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

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

#### 实现效果如下图： ####

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

#### 第一步：项目引进element ####

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

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

<template>
     <div>
      <el-form :model="config" ref="configTableForm">
              <el-table 
                  header-row-class-name="header_row_style" 
                  :data="config.list" 
                  style="width: 100%" 
                  max-height="450">
                  <el-table-column    
                      label="名称" 
                      prop="code" 
                      show-overflow-tooltip 
                      width="80">
                  </el-table-column>
                  <el-table-column >
                      <template slot-scope="scope">
                          <el-form-item 
                              :prop="'list.'+scope.$index+'.value'">
                              <el-input 
                                 :disabled="scope.row.showType == 3 || scope.row.showType == 4? true : false"
                                  v-model.trim="scope.row.value" 
                                  size="mini" 
                                  placeholder="请填写值"></el-input>
                          </el-form-item>
                      </template>
                  </el-table-column>
                  <el-table-column 
                      label="字段类型" 
                      width="120" 
                      show-overflow-tooltip>
                      <template slot-scope="scope">
                          { { scope.row.type}}
                      </template>
                  </el-table-column>
                  <el-table-column label="查询名">
                      <template slot-scope="scope">
                          <el-form-item 
                              :prop="'list.'+scope.$index+'.name'"
                              :rules="[
                                  {  required: scope.row.input, message: '不能为空', trigger: 'blur' }]">
                              <el-input 
                                 :disabled="scope.row.input ? false : true"
                                  placeholder="请输入查询名"
                                  v-model.trim="scope.row.name" 
                                  :maxlength="20"
                                  size="mini"></el-input>
                          </el-form-item>
                      </template>
                  </el-table-column>
                  <el-table-column label="长度" width="100">
                      <template slot-scope="scope">
                          <el-input-number 
                              :min="0" 
                              v-model="scope.row.length" 
                              size="mini" 
                              controls-position="right"></el-input-number>
                      </template>
                  </el-table-column>
                  <el-table-column label="描述">
                      <template slot-scope="scope">
                          <el-input 
                              placeholder="请输入描述"
                              v-model.trim="scope.row.memo"
                              size="mini"></el-input>
                      </template>
                  </el-table-column>
                  <el-table-column label="是否排序" width="100">
                     <template slot-scope="scope">
                          <el-select 
                              size="mini" 
                              v-model="scope.row.sort" 
                              @change="showModeChange(scope.row.sort, scope.$index)">
                              <el-option label="无" value="0"></el-option>
                              <el-option label="升序" value="1"></el-option>
                              <el-option label="降序" value="2"></el-option>
                          </el-select>
                      </template>
                  </el-table-column>
                  <el-table-column label="输入" width="50">
                      <template slot-scope="scope">
                          <el-checkbox 
                              v-model="scope.row.input" 
                             ></el-checkbox>
                      </template>
                  </el-table-column>
                  <el-table-column  width="80">
                     <template slot="header" slot-scope="scope">
                      
                         <el-checkbox  v-model="AallOutput" @change="handleAllOutput"></el-checkbox>   
                        <span>输出</span>              
                     </template>
                     <template slot-scope="scope">
                          <el-checkbox 
                              v-model="scope.row.output" 
                             ></el-checkbox>
                      </template>
                  </el-table-column>
                  <el-table-column label="是否必填" width="80">
                      <template slot-scope="scope">
                          <el-checkbox 
                              v-model="scope.row.isMust" 
                              :disabled="!scope.row.input"></el-checkbox>
                      </template>
                  </el-table-column>
                  <el-table-column label="展示类型" width="100">
                      <template slot-scope="scope">
                          <el-select 
                              size="mini" 
                              :disabled="scope.row.input ? false : true"
                              v-model="scope.row.showType" 
                              @change="showModeChange(scope.row.showType, scope.$index)">
                              <el-option label="文本" value="1"></el-option>
                              <el-option label="数字" value="2"></el-option>
                              <el-option label="日期" value="3"></el-option>
                              <el-option label="下拉" value="4"  disabled></el-option>
                          </el-select>
                      </template>
                  </el-table-column>
                  <el-table-column label="查询方式" width="100">
                      <template slot-scope="scope">
                          <el-select 
                              size="mini" 
                              :disabled="scope.row.input ? false : true"
                              v-model="scope.row.queryType">
                              <el-option 
                                  label="模糊" 
                                  value="1" 
                                  :disabled="scope.row.displayType == 3 || scope.row.displayType == 4 ? true : false"></el-option>
                              <el-option 
                                  label="精准" 
                                  value="2"></el-option>
                              <el-option 
                                  label="区间" 
                                  value="3" 
                                  :disabled="scope.row.displayType == 1 || scope.row.displayType == 4 ? true : false"></el-option>
                          </el-select>
                      </template>
                  </el-table-column>
              </el-table>
       </el-form>
        <div class="btns">
               <el-button 
                    type="primary"
                    @click="submitConfig('configTableForm')">保存并确定</el-button>
         </div>
     </div>
      
    </template>
    
    <script>
     export default { 
      data(){ 
    	  return{ 
    	   // 配置列表
    	    config: { 
    	         list: []
    	     },
    	  }
       },
       mounted(){ 
           this.getAllColumns()
        },
       methods:{ 
          // 获取表格数据进行渲染
          getAllColumns() {      
                var data = this.$route.query
                getTableDetail(data).then((res) => { 
                    if (res.data.infoCode == 200) { 
                        this.configData = new Array();
                        for (let i = 0; i < res.data.data.length; i++) {            
                                this.configData.push({ 
                                    value: res.data.data[i].value || '',
                                    sort:res.data.data[i].sort || '0',
                                    input: res.data.data[i].input || false,
                                    output: res.data.data[i].output || false,
                                    isMust: res.data.data[i].isMust || false,
                                    showType: res.data.data[i].showType || '1',
                                    queryType: res.data.data[i].queryType || '1',
                                    length: res.data.data[i].length,
                                    code: res.data.data[i].columnName,
                                    type: res.data.data[i].udtName || '',
                                    id: res.data.data[i].id,
                                    name: res.data.data[i].name,
                                    memo: res.data.data[i].memo,
                                    apiId: res.data.data[i].apiId,
                                    relName:res.data.data[i].relName || '',
                                    tableSchema:res.data.data[i].tableSchema,
                                    tableName:res.data.data[i].tableName,
    
                                });
                        }
                        this.$set(this.config, 'list', this.configData);
                        this.$nextTick(function() { 
                            this.$refs['configTableForm'].clearValidate();
                        })
                    } else { 
                        this.$set(this.config, 'list', new Array());
                    }
                }).catch(() => {  })
            },
            //修改表格后提交
           submitConfig(formName) { 
                this.config.list.forEach(e => { 
                    e.apiId = this.id
                })
                this.$refs[formName].validate((valid) => { 
                    if (valid) { 
                        saveApiColumns(this.config.list).then((res) => { 
                            this.configLoading = false;
                            if (res.data.infoCode == 200) { 
                                this.$message({ 
                                    type: 'success',
                                    message: '配置成功'
                                });
                                this.$router.back(-1)
                            } else { 
                                this.$message({ 
                                    type: 'error',
                                    message: '配置失败！'+res.data.info
                                });
                                this.getAllColumns()
                            }
                        }).catch(() => { 
                           
                        })
                    } else { 
                        return false;
                    }
                });
            },
       }
     }
    	
    </script>

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MTgyMjg0_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/ef02636d781241b9876b31d14be9dad1.png
[vxe-table]: https://blog.csdn.net/qq_44182284/article/details/106096939/
[element-ui]: https://element.eleme.cn/#/zh-CN/component/installation/