element表格添加必选值

公司要求实现这个效果，自己看来很多关于element的资料，发现好像实现不了这样的效果，所以自己模拟实现，ok，话不多说先看一下效果

1585634618(1).png

这里面我主要使用原生js添加元素，先上代码

<div v-if="this.form.equationContentType==1">
                <el-container>
                    <el-header>添加公式内容</el-header>
                    <el-main style="border:1px solid #E9EEF3;margin-bottom:30px;">
                        <div class="search searchAdd" @click="searchAdd">新增按钮</div>
                        <el-table :data="tableData3">
                            <el-table-column label="属性">
                                <template #default="scope">
                                    <div class="shuxings">
                                        <el-select size="small" v-model="scope.row.shuxings" @change="shuxingsChang(scope.$index)" filterable placeholder="请选择">
                                            <el-option
                                                v-for="item in shuxing"
                                                :key="item.id"
                                                :label="item.paramsName"
                                                :value="item.paramsName"
                                            ></el-option>
                                        </el-select>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="运算符">
                                <template #default="scope" class="operators">
                                    <div class="operators">
                                        <el-select size="small" v-model="scope.row.operators" @change="operatorsChang(scope.$index)" filterable placeholder="请选择">
                                            <el-option
                                                v-for="item in operator"
                                                :key="item.label"
                                                :label="item.label"
                                                :value="item.label"
                                            ></el-option>
                                        </el-select>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column width="240px" label="公式内容值">
                                <template #default="scope" class="content">
                                    <div class="content">
                                        <el-input size="small" @input="contentChang(scope.$index)" v-model.trim="scope.row.content"></el-input>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="同组公式关系">
                                <template #default="scope" class="relationships">
                                    <div class="relationships" v-if="scope.$index!=tableData3.length-1">
                                        <el-select size="small" v-if="scope.$index!=tableData3.length-1" @change="relationshipChang(scope.$index)" v-model="scope.row.relationships" filterable placeholder="请选择">
                                            <el-option
                                                v-for="item in relationship"
                                                :key="item.label"
                                                :label="item.label"
                                                :value="item.value"
                                            ></el-option>
                                        </el-select>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作">
                            <template slot-scope="scope">
                                <span class="operation" @click="del(scope.$index, tableData3)"  v-if="tableData3.length!==1">删除</span>
                            </template>
                            </el-table-column>
                        </el-table>
                    </el-main>
                </el-container>
            </div>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="输出" v-if="outputFlag3" prop="outputType">
                            <el-select size="small" v-model="form.outputType" @change="outputChange" filterable placeholder="请选择">
                                <el-option
                                    v-for="(item,index) in output"
                                    :key="index+0.01"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="输出值" prop="output" v-if="outputFlag">
                        <el-col :span="9">
                            <el-input size="small" v-if="form.outputType==0" v-model.number="form.output"></el-input>
                            <el-input size="small" v-if="form.outputType==2" v-model.trim="form.output"></el-input>
                            <el-select size="small" v-if="form.outputType==1" v-model="form.output" filterable placeholder="请选择">
                            <el-option
                                v-for="item in outputs"
                                :key="item.label"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                            </el-select>
                        </el-col>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="成本价格" prop="costPrice">
                <el-input size="small" style="width:200px" v-model.trim="form.costPrice"></el-input>
            </el-form-item>
          </el-form>
          <div class="dialog-footer">
            <div class="reset" @click="cancel">关闭</div>
            <div class="search" @click="confirm">确认</div>
          </div>
        </el-dialog>

下拉和输入框的改变事件

// 属性改变事件
    shuxingsChang(i){
        let paras=document.querySelectorAll(".shuxings")
        console.log(paras[i].lastChild.className)
        if(paras[i].lastChild.className=="shuxingsChild"){
            paras[i].lastChild.parentNode.removeChild(paras[i].lastChild);
        }
    },
    // 运算符改变事件
    contentChang(i){
        let paras=document.querySelectorAll(".content")
        if(paras[i].lastChild.className=="contentChild"){
            paras[i].lastChild.parentNode.removeChild(paras[i].lastChild);
        }
    },
    // 公式内容值改变事件
    operatorsChang(i){
        let paras=document.querySelectorAll(".operators");
        if(paras[i].lastChild.className=="operatorsChild"){
            paras[i].lastChild.parentNode.removeChild(paras[i].lastChild);
        }
    },
    // 同组公式关系改变事件
    relationshipChang(i){
        let paras=document.querySelectorAll(".relationships")
        if(paras[i].lastChild.className=="relationshipsChild"){
            paras[i].lastChild.parentNode.removeChild(paras[i].lastChild);
        }
    },

判断有没有输入

//   table添加必填值
        let shuxings=document.querySelectorAll('.shuxings')
        let operators=document.querySelectorAll('.operators')
        let content=document.querySelectorAll('.content')
        let relationships=document.querySelectorAll('.relationships')
        for(let i=0;i<this.tableData3.length;i++){
            // 让没有这些值的时候内容为空
            if(!this.tableData3[i].shuxings){
                if(shuxings[i].childNodes.length==1){
                var div = document.createElement("div"); // 创建一个元素节点
                div.innerHTML="请输入属性";
                div.className='shuxingsChild';
                shuxings[i].appendChild(div);
                }
            }else{
                let paras=document.querySelectorAll(".shuxingsChild")
                if(paras[i]){
                paras[i].parentNode.removeChild(paras[i]);
                }
            }
            if(!this.tableData3[i].operators){
            if(operators[i].childNodes.length==1){
                var div = document.createElement("div"); // 创建一个元素节点
                div.innerHTML="请输入运算符";
                div.className='operatorsChild';
                operators[i].appendChild(div);
            }
            }else{
                let paras=document.querySelectorAll(".operatorsChild");
                if(paras[i]){
                paras[i].parentNode.removeChild(paras[i]);
                }
            }
            if(!this.tableData3[i].content){
            if(content[i].childNodes.length==1){
                var div = document.createElement("div"); // 创建一个元素节点
                div.innerHTML="请输入公式内容";
                div.className='contentChild';
                content[i].appendChild(div);
            }
            }else{
                let paras=document.querySelectorAll(".contentChild")
                if(paras[i]){
                paras[i].parentNode.removeChild(paras[i]);
                }
            }
            if(i ==this.tableData3.length-1){
                this.tableData3[i].relationships="";
            }
            if(!this.tableData3[i].relationships && i !=this.tableData3.length-1){
                if(relationships[i].childNodes.length==1){
                    var div = document.createElement("div"); // 创建一个元素节点
                    div.innerHTML="请输入同组公式关系";
                    div.className='relationshipsChild';
                    relationships[i].appendChild(div);
                }
            }else{
            let paras=document.querySelectorAll(".relationshipsChild")
                if(paras[i]){
                paras[i].parentNode.removeChild(paras[i]);
            }
            }
        }
        let shuxingsChild=document.getElementsByClassName('shuxingsChild');
        let operatorsChild=document.querySelectorAll('.operatorsChild');
        let contentChild=document.querySelectorAll('.contentChild');
        let relationshipsChild=document.querySelectorAll('.relationshipsChild');
        if (valid && shuxingsChild.length == 0 && operatorsChild.length == 0 && contentChild.length == 0 && relationshipsChild.length==0) {
  这里面写的是我们公司添加删除逻辑，按照个人情况写
}

效果实现，本人是新人，有啥更好的建议，希望评论，互相学习讨论