自定义el-table 可添加

项目场景：

可以添加的el-table表 表别名和监控日期都是根据去查询当前选择的数据表所返回的动态数据

---

问题描述

结构搭建具体实现代码

    <div class="listOf">
        <span class="message icon">监控列表</span>
        <span v-if="editData.drawerTitle !=='编辑'" class="message addicon" @click="addLine()">+ 添加</span>
      </div>
      <div class="table-box">
        <el-table ref="ruleForm" :data="ruleForm.demoList" :header-cell-class-name="func" height="320px">
          <el-table-column width="10" />
          <el-table-column label="数据表" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-form-item :prop="'demoList.'+scope.$index+'.tableName'" :rules="rules.tableName">
                <el-select
                  v-model="scope.row.tableName"
                  placeholder="请选择数据表"
                  clearable
                  filterable
                  @change="downList($event,scope.row)"
                  @focus="$refs.ruleForm.clearValidate(`demoList.${scope.$index}.tableName`)"
                >
                  <el-option
                    v-for="(item2, index) in allResortlistfun(dataTypelist)"
                    :key="index"
                    :label="item2.tableName"
                    :value="item2.tableName"
                    :disabled="(item2.yesterdayDisabled && editData.monitorModel == 'yesterday') || (item2.lastMonthDisabled && editData.monitorModel == 'last_month')"
                  />
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="数据表别名" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-form-item :prop="'demoList.'+scope.$index+'.tableAlias'">
                <el-input
                  v-model="scope.row.tableAlias"
                  placeholder="数据表别名"
                  size="small"
                  clearable
                  disabled
                  @focus="$refs.ruleForm.clearValidate(`demoList.${scope.$index}.tableAlias`)"
                />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="监控日期" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-form-item :prop="'demoList.'+scope.$index+'.monitorColumn'" :rules="rules.monitorColumn">
                <el-select
                  v-model="scope.row.monitorColumn"
                  placeholder="请选择监控日期字段"
                  clearable
                  filterable
                  @focus="$refs.ruleForm.clearValidate(`demoList.${scope.$index}.monitorColumn`)"
                >
                  <el-option
                    v-for="(item2, index) in editData.drawerTitle ==='编辑' ? monitoringDate : scope.row.monitoringDate "
                    :key="index"
                    :label="item2.column_name"
                    :value="item2.column_name"
                  />
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="" width="50" align="center">
            <template slot-scope="scope">
                <i class="el-icon-delete icon-primary cursor-pointer" @click="deleteResortlist(scope.$index)" />
            </template>
          </el-table-column>
        </el-table>
      </div>

实现思路：table表一个数组，里面的内容为数组里的值

实现添加功能：

 addLine() {
      const newLine = {
        tableName: '',
        tableAlias: '',
        monitorColumn: '',
        monitoringDate: []
      }
      this.index++
      this.ruleForm.demoList.push(newLine)
    },

实现删除功能：

 // 删除
    deleteResortlist(index) {
      this.ruleForm.demoList.splice(index, 1)
    },

给表头选的添加 * 号

// * 给头部添加星星
    func(obj) {
      const list = ['数据表', '监控日期']
      if (list.includes(obj.column.label)) {
        return 'starclass'
      }
    },
 
//css
table th.starclass div::before {
      content: '*';
      color: #f56c6c;
      margin-right: 4px;
     }

选择数据表，更新不了表别名和监控日期字段的值
编辑时选择数据表，监控日期展示未清空

 async downList(e, row) {
      const data = {
        tableName: e
      }
      if (e) {
//监控日期
      await queryTableInfo(data).then(res => {
          if (this.editData.id) {
            this.monitoringDate = res
          } else {
            this.$forceUpdate()
            row.monitoringDate = res
          }
        })
//表别名
      await getTableAlias(data).then(res => {
          console.log(res);
          if (typeof res === 'string') {
            row.tableAlias = res
            this.$forceUpdate()
          } else if (typeof res === 'boolean'){
            row.tableAlias = ''
          }
        })
        row.monitorColumn=''
      }
    },

//父组件 编辑时调用子组件数据表的change事件
 this.$nextTick(() => {
          this.$refs['taskAdd'].downList(row.tableName)
        }) 

编辑回显：

  edtiFunc() {
       this.ruleForm = { ...this.ruleForm, ...this.editData }
       if(this.editData.id){
          this.ruleForm.demoList = [{
           tableName: this.editData.tableName,
           tableAlias: this.editData.tableAlias,
           monitorColumn: this.editData.monitorColumn
        }]
      }
    },