自定义动态添加表格组件

由于表格样式使用ui组件不可实现就采用的原生的标签和属性准备弹框里面的内容表格的样式是左边是上下的两行需要传入rowspan属性数值由于表头占居一行动态新增行占据一行这里的rowspan就是使用的循环tr数组的长度加2这样样式就不会乱。

后端是要求的删除和新增都存在本地当用户修改新增完之后点击保存会把整个数组直接传过去，因为是两行涉及到了两个数组在这里就是合并数组穿就行。最后一行的合计权重值是用的计算属性两个数组的权重字段相加得到的。

效果图：

 

样式代码如下：

 <!-- 内层弹框 -->
      <el-dialog
      width="70%"
      :visible.sync="innerVisible"
      append-to-body
      :show-summary="true"
      >
      <!-- 表格 -->
    <div class="tablekuang">
      <table>
        <thead>
        </thead>
        <!-- 部门年度重点工作 -->
        <tbody id="tableaddfirst">
          <tr>
            <td :rowspan="bminputinfo.length+2"> 
            部门年度<br>
            重点,工作<br>
            50%<br>
          </td>
            <td>考核内容</td>
            <td>权重</td>
            <td>评价标准</td>
            <td>操作</td>
          </tr>
          <tr v-for="(item , index) in bminputinfo" :key="index">
            <td><input type="text" v-model="item.content"></td>
            <td><input type="text" v-model="item.weightNum"></td>
            <td><input type="text" v-model="item.standard"></td>
            <td><button class="delbtn" @click="deltable(1,index)">删除</button></td>
          </tr>
          <!-- 没数据就显示这个 -->
          <tr id="zuihou">
           <td colspan="4"><button @click="addtable">+</button></td>
          </tr>
        </tbody>
        <!-- 本岗位工作50% -->
        <tbody id="tableaddtwo">
          <tr>
            <td :rowspan="tbodyinfo.length+2"> 
            本岗位工作<br>
            50%<br>
          </td>
            <td>考核内容</td>
            <td>权重</td>
            <td>评价标准</td>
            <td>操作</td>
          </tr>
          <tr v-for="(item,index) in tbodyinfo" :key="index">
            <td><input type="text" v-model="item.content"></td>
            <td><input type="text" v-model="item.weightNum"></td>
            <td><input type="text" v-model="item.standard"></td>
            <td><button class="delbtn" @click="deltable(2,index)">删除</button></td>
          </tr>
          <!-- 没数据就显示这个 -->
          <tr id="zuihoutwo">
           <td colspan="4"><button @click="addbuttomtable">+</button></td>
          </tr>
        </tbody>
        <!-- 合计 -->
        <tfoot>
          <tr>
            <td>合计</td>
            <td></td>
            <td>{{ sumnum.toFixed(2) }}%</td>
          </tr>
          </tfoot>
      </table>
      <div style="text-align:right">
        <button style="margin-top:18px;width: 30%;height: 40px;" @click="submittable(prepareData)">保存</button>
      </div>
    </div>  
  </el-dialog>

变量&&事件代码如下：

  export default {
    data() {
      return {
        inputinfo:{
          content:'',
          weightNum:'',
          standard:''
        },
        bminputinfo:[],
        tbodyinfo:[],
        rowspanNumber:4,
        rowspanNumber2:5,
        innerVisible: false,
        }},
    methods:{
  // 部门年度新增表格行
      addtable(){
      this.bminputinfo.push({
          content:'',
          weightNum:'',
          standard:'',
          type:0,
        },)
          this.rowspanNumber++
      },
      // 本岗位新增行
      addbuttomtable(){
      this.tbodyinfo.push({
          content:'',
          weightNum:'',
          standard:'',
          type:1,
        },)
            this.rowspanNumber2++
            console.log( this.tbodyinfo);
      },
      deltable(num,index){
        // 删除数组根据下表
        this.$confirm('确定要删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          console.log(num);
          if(num==1){
            this.bminputinfo.splice(index,1)
          }else if(num==2){
            this.tbodyinfo.splice(index,1)
          }
          this.$message.success('删除成功');
        }).catch(() => {
          console.log('用户取消删除');
        });
      },
      // 点击弹出内部框
      innerVisibleclick(obj){
        this.innerVisible=true
        //  去请求接口 assignmentdialog
        this.$axios.get('assignmentdialog',{id:obj.id},(res) => {
          var status = res.status;
        if (status == 200) {
          console.log(res.data,'成功');
          //  遍历数组将type为0的加到新数组里
        let typel = res.data.filter(item=>{
          return item.type=='0'
          })
            //  遍历数组将type为1的加到新数组里
        let typey = res.data.filter(item=>{
          return item.type=='1'
          })
         this.bminputinfo=typel
         this.tbodyinfo=typey
        } else {
          this.$message.error(res.message);
        }
        })
      },
        //点击保存按钮事件
      submittable(prepareData){
        // 这是将要向接口发出提交的数据
        let filrernewarr =this.bminputinfo.concat(this.tbodyinfo)
        console.log(filrernewarr,'这是将要向接口发出提交的数据',prepareData.id);
        this.$axios.jsonPost("assessmenttasks",{
               id:prepareData.id,content_list:filrernewarr
              },
              (res) => {
              console.log(res,'返回');
              })
      },}

计算合计代码如下：

    //  计算合计
    computed:{
      sumnum(){
        // 合并数组在计算合计百分比 concat reduce即可
        let sum=0
        let sums=0
        for(let i = 0; i <this.tbodyinfo.length; i++) {
          sum += Number(this.tbodyinfo[i].weightNum)
        }
        for(let i = 0; i <this.bminputinfo.length; i++) {
          sums += Number(this.bminputinfo[i].weightNum)
        }
        return sum+sums
      }
    },

希望能够帮助到拿到此需求的小伙伴！！！不明白的留言即可，我会认真解答，年底冲一把。