表格增刪列 及表格聯動

//object.js

module.exports={
	'partList_jksq':{
		"attributeId": "partList_jksq",
		"cols":[{
			'id':"brand",
			'name': '品牌',
			'addData': ['123'],
			'selectDetail':['1','2'],
			'rightData':['子流程狀態','子流程連接'],
			'required':true,
			'extend':true,//繼承給下一個表格數據
			'xtype':'input',
		},{
			'id':'materiaModel',
			'name': '物料型號',
			'addData': ['1'],
			'selectDetail':['1','2'],
			'xtype':'select',
		},{
			'id':'date',
			'name': '評審完成時間',
			'addData': ['2019-08-02'],
			'xtype':'date',
		},{
			'id':'operation',
			'addData': [''],
			'name': '操做',
		}], 
		"disabled": false,
		"id": "partList_jksq",
		"name": "資源選擇範圍",
	},
	'partList_jksq2':{
		"attributeId": "partList_jksq2",
		"cols": [{
			'id':"brand",
		},{
			'id':'materiaModel',
		},{
			'id':'Conclusion',
			'name': '器件結論',
			'addData': [''],
			'rightData':[],
			'xtype':'',
		},{
			'id':'Conclusion',
			'name': '軟件結論',
			'addData': [''],
			'rightData':[],
			'xtype':'',
		}{
			'id':'record',
			'name': '達成一致記錄',
			'addData': [''],
			'rightData':[],
			'xtype':'input',
		},{
			'id':'process',
			'name': '啓動認證流程',
			'addData': [''],
			'rightData':[],
			'xtype':'radio',
		}], 
		"disabled": false,
		"id": "partList_jksq2",
		"name": "選型結論",
	},
	"show": true,
	"span": 24,
	"typeId": "BuildLibraryFormDoc",
	"xtype": "tableModelSelection"
}

//父級

<template>
  <div class="matrix-table part-change-table">
    <el-collapse v-model="activeTabs" class="taskcollapse">
      <el-collapse-item :title="object.name" name="1">
        <div class="table-panel-containner">
          <el-table
            class="headHide"
            :data="objectValue[object.id]"
            border
            style="width: 100%"
            :span-method="arraySpanMethod"
            :cell-class-name="cellClassNameFn"
          >
            <template v-for="(col ,index) in cols">
              <!-- 第一列 標題 -->
              <el-table-column
                fixed
                class-name="flow-node-table-label"
                width="150px"
                :prop="col['addData']"
                :label="col.label"
                v-if="!index"
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.required" class="table-header-required">*</span>
                  {{scope.row.name}}
                </template>
              </el-table-column>
              <!-- 中間主體 col['addData'+index]-->
              <el-table-column :prop="col['addData'+index]" 
                :width="object.id=='partList_jksq'?'150px':''" 
                min-width="150px"
                :label="col.label" v-else>
                <template slot-scope="scope">
                  <!-- 非操做 -->
                  <span v-if="scope.row['id']!='operation'">
                    <el-input
                      v-if="scope.row.xtype=='input'"
                      placeholder="請輸入"
                      v-model="scope.row['addData'][index-1]"
                    ></el-input>

                    <el-select
                      v-else-if="scope.row.xtype=='select'"
                      v-model="scope.row['addData'][index-1]"
                    >
                      <el-option
                        v-for="item in scope.row.selectDetail"
                        :key="item"
                        :label="item"
                        :value="item"
                      ></el-option>
                    </el-select>
                    <template v-else-if="scope.row.xtype=='radio'">
                      <el-radio v-model="scope.row['addData'][index-1]" label="1">是</el-radio>
                      <el-radio v-model="scope.row['addData'][index-1]" label="2">否</el-radio>
                    </template>
                    <span v-else>
                      <template v-if="scope.row['addData']">{{scope.row['addData'][index-1]}}</template>
                    </span>
                  </span>
                  <!-- 操做 -->
                  <span v-else>
                    <el-button @click="delCol(('addData'+index),index)">刪除</el-button>
                  </span>
                  <span></span>
                </template>
              </el-table-column>
            </template>
            <!-- 右側菜單 -->
            <template v-for="(sub,index) in rightMenu" v-if="object.id!='partList_jksq'">
              <el-table-column fixed="right" label :width="sub.width" prop>
                <template slot-scope="scope">
                  <!-- {{index}}--{{scope.row['rightData']}} -->
                  <template
                    v-if="scope.row['id']=='brand'||scope.row['id']=='materiaModel'"
                  >{{sub.data}}</template>
                  <template v-else-if="scope.row['rightData']">
                    <el-input
                      v-if="sub.xtype=='input'"
                      placeholder="請輸入"
                      v-model="scope.row['rightData'][index]"
                    ></el-input>
                    <vivo-select-user
                      v-else-if="sub.xtype=='addUser'"
                      ref="selectUser"
                      :single="sub.single"
                      :placeholder="sub.placeholder"
                      v-model="scope.row['rightData'][index]"
                    >
                    </vivo-select-user>
                    <template v-else>--</template>
                  </template>
                </template>
              </el-table-column>
            </template>
            <!-- 添加列 -->
            <el-table-column label="添加列" style="min-width:80px;" v-if="object.id=='partList_jksq'">
              <template slot-scope="scope" v-if="scope.$index==0&&object.id=='partList_jksq'">
                <el-button raw-type="button" @click="addCol">+</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-collapse-item>
    </el-collapse>
    <!-- {{objectValue[object.id]}} -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      radio: 0,
      loading: false,
      activeTabs: ["1"],
      tableData: [],
      rightMenu: [
        {
          id: "childProcessState",
          data: "子流程狀態",
          width:"150px",
          xtype: ""
        },
        {
          id: "childProcessLink",
          data: "子流程連接",
          width:"150px",
          xtype: ""
        },
        {
          id: "taskRecipient",
          data: "任務接收人",
          placeholder:"請選擇(可多選)",
          width:"250px",
          xtype: "addUser"
        },
        {
          id: "multitaskingPeople",
          data: "任務接收人",
          placeholder:"請選擇",
          width:"170px",
          single:false,
          xtype: "addUser"
        }
      ]
    };
  },
  created() {
    if (!this.$route.query.pboid) {
      this.objectValue[this.object.id] = this.object["cols"];
    }
  },
  props: {
    object: Object,
    requiredData: Object,
    objectValue: Object,
    cols: Array
  },
  watch: {
    "objectValue.partList_jksq": {
      handler(val) {
        var getBrand = {},
          getMateriaModel = {};
        val.forEach(item => {
          if (item["id"] == "brand") getBrand = item;
          if (item["id"] == "materiaModel") getMateriaModel = item;
        });
        // if(this.objectValue['partList_jksq2'].every(item=>item['id']!='brand')){
        //   this.objectValue['partList_jksq2'].unshift({id:'brand','addData': [],})
        // }
        this.objectValue["partList_jksq2"].forEach((item, index) => {
          if (item["id"] == "brand") {
            let list = JSON.parse(JSON.stringify(getBrand));
            list["xtype"] = "";
            this.$set(this.objectValue["partList_jksq2"], [index], list);
          }
          if (item["id"] == "materiaModel") {
            let list = JSON.parse(JSON.stringify(getMateriaModel));
            list["xtype"] = "";
            this.$set(this.objectValue["partList_jksq2"], [index], list);
          }
        });
      },
      deep: true
    }
  },
  methods: {
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      //遍歷本行合併表
      if (this.object.id != "partList_jksq") {
        if(this.objectValue[this.object.id][0].addData)
        var colLength=this.objectValue[this.object.id][0].addData.length;
        console.log(colLength)
        if(row.addData){
          var len = row.addData.length;
          if(rowIndex==0||rowIndex==1){//(row.id == "brand" || row.id == "materiaModel")
            if (this.isColumnIndex(columnIndex,len)) {
                return [2,1]
            }
          }
          if(row.id == "record" || row.id == "process"){
            if(columnIndex) return [1,colLength+4]
          }
        }
      }
    },
    cellClassNameFn({row, column, rowIndex, columnIndex}){
      if (this.object.id != "partList_jksq") {
        if(row.addData){
          var len = row.addData.length;
          if(rowIndex==0||rowIndex==1){//(row.id == "brand" || row.id == "materiaModel")
              if (this.isColumnIndex(columnIndex,len)) {
                  return 'tHeaderBg'
              }
            }
        }
      }
    },
    isColumnIndex(columnIndex,len){
      return  columnIndex == (JSON.parse(len)+1) || 
              columnIndex == (JSON.parse(len)+2) ||
              columnIndex == (JSON.parse(len)+3) || 
              columnIndex == (JSON.parse(len)+4);
    },
    addCol() {
      //添加行
      this.cols.push({ prop: "addData", label: "add" });
      this.objectValue[this.object.id].forEach(item => {
        if (item.name != "操做") item["addData"].push("");
      });
    },
    delCol(name, index) {
      //刪除行
      if(this.cols.length>2) this.cols.splice(index, 1);
      this.objectValue[this.object.id].forEach(item => {
        if (item["addData"]) {
          if(item["addData"].length>1){
            item["addData"].splice(index - 1, 1);
          }
        }
      });
    },
    //獲取動態表格列名
    //表頭列寬度
    //flexColumnWidth: function(colId) {
    //  let flexWidth = 0;
    //  switch (colId) {
    //    case "desEn":
    //     flexWidth = 170;
    //      break;
    //    default:
    //      flexWidth = 150;
    //  }
    //  return flexWidth + "px";
    //}
    //表格行號切換
    // showRow(row, event, column) {
    //   this.radio = this.objectValue[this.object.id].indexOf(row);
    // }
  }
};
</script>

<style lang="less">
.matrix-table {
  .pd10 {
    padding: 10px;
  }
  tbody .flow-node-table-label {
    padding: 3px 12px 3px 0;
    width: 150px;
    background: #f3faff !important;
    color: #798999;
    position: relative;
    background-clip: padding-box;
    line-height: 1.2;
  }
  .hover-row {
    td {
      &:not(.flow-node-table-label) {
        background:transparent !important;
      }
    }
    td.tHeaderBg{
      background: #f3faff !important;
    }
  }
  .headHide {
    .el-table__header-wrapper {
      display: none;
    }
  }
  .tHeaderBg{
    background: #f3faff !important;
    color: #798999;
  }
  .el-table__body-wrapper{
    >table{
      overflow: hidden;
    }
  }
  .el-table__fixed-right{
    tr td.is-hidden+ td {
      border-left: 1px solid #D8DDE5 !important;
    }
  }
  .el-input input,.ms-ctn .ms-input-container input{
    padding-left:0;
  }
}
</style>

//邏輯頁面

<template>
  <div class="">
    <tablePartCells :object="object['partList_jksq']" :objectValue="objectValue" :cols="cols"></tablePartCells>
    <tablePartCells :object="object['partList_jksq2']" :objectValue="objectValue" :cols="cols"></tablePartCells>
  </div>
</template>
<script>
import tablePartCells from "./table-part-cell"
export default {
  data() {
    return {
      cols: [{ prop: "", label: "標題" }, { prop: "addData1", label: "add1" }],
	  object:{},
    };
  },
  components:{
    tablePartCells
  },
  created(){
	this.object = require("./object.js"); //配置的數據
  },
  props: {
    objectValue: Object	//回填的數據存放
  },
};
</script>