iview动态表格实现并实现单行可增删（表头与内容都是动态获取）----完整版

需求及效果图，看前一篇随笔

话不多说直接上代码：

<template>
    <div class="common_info">
       <Spin size="large" fix v-if="loadingShow"></Spin>
      <div class="btn_box">
          <Button shape="circle" @click="goBack">返回</Button>
          <Button type="primary" shape="circle" :loading="saveLoading" @click="save('formData')">保存</Button>
      </div>
      <div class="content_box">
        <Form ref="formData" :model="formData" :rules="validate">
            <Row>
                <Col span="12">
                    <FormItem label="考核年度：" prop="year">
                        <DatePicker type="year" placeholder="请选择年份" style="width: 200px" v-model="formData.year" format="yyyy" :clearable="false"></DatePicker>
                    </FormItem>
                </Col>
                <Col span="12">
                    <FormItem label="考核对象：" prop="assesseeTypeCodeArr">
                        <Cascader ref="address" :data="evalTypeOptions" v-model="formData.assesseeTypeCodeArr" @on-change="changeCascader" style="width:200px"  :clearable="false"></Cascader>
                    </FormItem>
                </Col>
            </Row>
            <Row>
                <Col span="24">
                    <FormItem label="评分人权重：">
                        <div style="color:red">(必须选择年度和考核对象后才能设置评分人权重)</div>
                        <table border="1" cellspacing='0' class='top_table'>
                            <tbody>
                                <tr>
                                    <td class="td_name td_name_l required-star">评分人员</td>
                                    <td class="td_name td_name_r required-star">权重(%)</td>
                                </tr>
                            </tbody>
                        </table>
                        <Table ref="selection" v-for="(item) in columnsDataList" :columns="item.columns" :data="item.data" :key='item.id'>
                            <template slot-scope="{row, index }" slot="postCodeArr">
                                <Select v-model="row.postCodeArr" multiple style="width:550px" @on-change="tableSelectChange($event, index, item.data, evalAssessorOptions)" :transfer="true" >
                                    <Option v-for="item in evalAssessorOptions" :value="item.itemValue" :key="item.itemValue">{{ item.itemName }}</Option>
                                </Select>
                            </template>
                            <template slot-scope="{ row, index }" slot="scoreRatio">
                                <Input v-model="row.scoreRatio" style="width: 90px" @on-change="tableInputChange($event, index, 'scoreRatio', item.data)"/>
                                <Icon type="ios-add-circle-outline" @click="addTableRow(row,item)" />
                                <Icon type="ios-close-circle-outline" @click="delTableRow(index,item)" />
                            </template>
                        </Table>
                    </FormItem>
                </Col>
            </Row>
        </Form>
      </div>
    </div>
</template>
<script>
    import { Message,Modal } from 'view-design';
    import {MsgType, PublicType } from '../../libs/constants';
    export default {
        data(){
            return {
                validate: {
                    year: [{ required: true, message: '请输入年度', trigger: 'blue' }],
                    assesseeTypeCodeArr: [{ required: true, message: '请选择考核对象', trigger: 'blue' }],
                },
                loadingShow:false, //页面加载loading效果
                saveLoading:false,
                formData:{
                    evaluationAssessorList:[]
                },
                evalTypeOptions:[], //考核对象数据字典
                evalAssessorOptions:[], //评分人员数据字典
                columnsDataList:[], //表头和数据的合集
                assessorList:[], //编辑时进来的评分人数据
            }
        },
        created() {
            this.initDic();
            let routerParams = this.$route.query;
            if(routerParams.type == 'edit'){ //编辑
                this.getDetatil(routerParams.id);
            }else if(routerParams.type == 'add'){ //新增
                
            }
        },
        mounted(){},
        computed: {},
        watch: {},
        methods: {
            // 数据字典初始化
            initDic () {
                this.$api.common.getDicList('ASSESSOR_TYPE').then(res => {
                    if (res.result == MsgType.SUCCESS) {
                         let dicTree = res.data.dicTree || {};
                         let dicTreeList = dicTree.children || [];
                        this.evalAssessorOptions = dicTreeList
                    }
                });
                this.$api.common.getDicList('EVAL_TYPE').then(res => {
                    if (res.result == MsgType.SUCCESS) {
                         let dicTree = res.data.dicTree || {};
                         let dicTreeList = dicTree.children || [];
                        let evalTypeOptions = dicTreeList;
                        for(let i=0;i<evalTypeOptions.length;i++){
                            evalTypeOptions[i].value = evalTypeOptions[i].itemValue
                            evalTypeOptions[i].label = evalTypeOptions[i].itemName
                            let item = evalTypeOptions[i].children;
                            if(!!item){
                                for(let j=0;j<item.length;j++){
                                    item[j].value = item[j].itemValue
                                    item[j].label = item[j].itemName
                                }
                            }
                        }
                        this.evalTypeOptions = evalTypeOptions;
                    }
                });
            },
            //获取详情数据
            getDetatil(id){
                let data={
                    id:id
                };
                this.loadingShow = true;
                this.$api.evalProgrammeSetting.getDetailData(data).then(res=>{
                    if(res.result == MsgType.SUCCESS){
                        let data = res.resultData || [];
                        this.formData= data[0] || {};
                        if(this.formData.assesseeTypeCodeArr !=undefined){
                            this.formData.assesseeTypeCodeArr = this.formData.assesseeTypeCodeArr.split(',')
                        }
                        this.assessorList = this.formData.assessorList;
                        
                        let params ={
                            evalYear: this.formData.year,
                            evalTypeCode: this.formData.assesseeTypeCode
                        }
                        this.loadingShow = true;
                        this.$api.evalProgrammeSetting.getByParams(params).then(res=>{
                            this.loadingShow = false;
                            if(res.result == MsgType.SUCCESS){
                                let evalNameList = res.resultData || []
                                let that = this;
                                for (let i = 0; i < evalNameList.length; i++) {
                                    var title_info = {
                                    id: -1,
                                    columns: [
                                        {title: '考核指标名称',slot: 'postCodeArr'},
                                        {title: '--',width:200,align:'center',slot: 'scoreRatio'}
                                    ],
                                    data: []
                                    };
                                    title_info.columns[0].title = evalNameList[i].evalName;
                                    title_info.id = evalNameList[i].id;
                                    that.columnsDataList.push(title_info);
                                }
                                let columnsDataList = this.columnsDataList;
                                let assessorList = this.assessorList;
                                //评分人数据与各自表头对应上
                                for(let i=0;i<columnsDataList.length;i++){
                                    for(let j=0;j<assessorList.length;j++){
                                        if(columnsDataList[i].id == assessorList[j].indexConfigId){
                                            assessorList[j].postCodeArr =assessorList[j].postCode.split(','); //下拉框的回填需要数组形式
                                            columnsDataList[i].data.push(assessorList[j]);
                                        }
                                    }
                                }
                                this.columnsDataList = columnsDataList;
                            }
                        }).catch(() => {
                            this.loadingShow = false;
                        });
                        
                    }
                    this.loadingShow = false;
                }).catch(() => {
                   this.loadingShow = false;
                });
            },
            /**
             * 下拉框change事件
             * @param e 修改值
             * @param index 下标
             * @param data 当前数据
             * @param dictList 字典数组
             */
            tableSelectChange(e,index,data,dictList){
                let postNameList =''
                for(let i=0;i<e.length;i++){
                    postNameList += PublicType.getDictNameByCode(e[i],dictList)+',';
                }
                postNameList = postNameList.slice(0,postNameList.length-1);
                data[index].postName = postNameList;
                data[index].postCodeArr= e;
                data[index].postCode = e.join(',');
            },
            //输入框change事件
            tableInputChange(e,index,type,data){
               data[index][type] = e.target.value
            },
            //切换考核对象
            changeCascader(value, selectedData){
                this.columnsDataList =[]; //每次切换考核对象要清空数据和表头，防止累加push数据
                let flag = true;
                if(value.length !=0 && this.formData.year == ''){
                    this.$Message.error({
                        content: '请先选择考核年度！',
                        duration: 3
                    });
                    this.$refs.address.clearSelect()
                    flag = false;
                    return
                }
                if(flag){
                    this.formData.year = this.$moment(this.formData.year).format('YYYY');
                    this.formData.assesseeType = selectedData[selectedData.length -1].label;
                    this.formData.assesseeTypeCode = selectedData[selectedData.length -1].value;
                    let params ={
                        evalYear:this.formData.year,
                        evalTypeCode:this.formData.assesseeTypeCode
                    }
                    this.loadingShow = true;
                    this.$api.evalProgrammeSetting.getByParams(params).then(res=>{
                        this.loadingShow = false;
                        if(res.result == MsgType.SUCCESS){
                            let evalNameList = res.resultData || []
                            let that = this;
                            for (let i = 0; i < evalNameList.length; i++) {
                                var title_info = {
                                id: -1,
                                columns: [
                                    {title: '考核指标名称',slot: 'postCodeArr'},
                                    {title: '--',width:200,align:'center',slot: 'scoreRatio'}
                                ],
                                data: []
                                };
                                title_info.columns[0].title = evalNameList[i].evalName;
                                title_info.data = [{postCodeArr:[],postCode: '',postName:'',scoreRatio: '',indexConfigId: ''}];
                                title_info.id = evalNameList[i].id;
                                that.columnsDataList.push(title_info);
                            }
                        }
                    }).catch(() => {
                        this.loadingShow = false;
                    });
                }
            },
            //添加行
            addTableRow (row,items) {
                const item = {
                    indexConfigId:'',
                    postCodeArr:[],
                    postCode: '',
                    postName:'',
                    scoreRatio: '',
                }
                items.data.push(item)
            },
            //删除行
            delTableRow(index,items){
               items.data.splice(index,1);
            },
            //保存
            save(name){
                //  console.log(this.formData)
                //  console.log(this.columnsDataList)
                 this.formData.evaluationAssessorList =[]
                let flag = true;
                if(this.formData.year == '' || this.formData.assesseeTypeCode == undefined){
                    this.$Message.error({
                        content: '考核年度和考核对象不能为空，请检查！',
                        duration: 5
                    });
                    flag = false;
                }
                let filterData = this.columnsDataList;
                filterData.forEach(item =>{
                    var datas = item.data;
                    datas.forEach((children, index) =>{
                        if(children.postCode == '' || children.scoreRatio == ''){
                            this.$Message.error({
                                content: '【'+item.columns[0].title + '】中的评分人员和权重不能为空，请检查！',
                                duration: 5
                            });
                            flag = false;
                        }
                        children.indexConfigId =item.id;
                        this.formData.evaluationAssessorList.push(children);
                    })
                })
                if(flag){
                    this.formData.year = this.$moment(this.formData.year).format('YYYY');
                    let params= {
                       evaluationTarget:{
                           id: this.formData.id,
                           year: this.formData.year,
                           assesseeType: this.formData.assesseeType,
                           assesseeTypeCode: this.formData.assesseeTypeCode,
                           assesseeTypeCodeArr: this.formData.assesseeTypeCodeArr.join(','),
                       },
                       evaluationAssessorList: this.formData.evaluationAssessorList
                    }
                    this.loadingShow = true;
                    this.$api.evalProgrammeSetting.saveData(params).then(res=>{
                        if(res.result == MsgType.SUCCESS){
                            let _this = this;
                            setTimeout(function(){
                                _this.goBack();
                            },1000)
                        }
                        this.loadingShow = false;
                    }).catch(() => {
                    this.loadingShow = false;
                    });
                }
            },
            //返回
            goBack(){
                this.$router.push({name: 'evalProgrammeSettingList'});
            },
        },
    }
</script>

<style scoped lang="less">
    .common_info .content_box{
        width:70%;
        margin:90px auto 0 5%;
    }
    .ivu-cascader{
        display: inline-block;
    }
    .common_info .top_table{
        margin-bottom: 0;
        border:none;
    }
    .common_info .top_table .td_name_l{
        padding-left:20px;
        text-align: left;
    }
    .common_info .top_table .td_name_r{
        width: 25%;
        text-align: center;
    }
    .ivu-icon{
        font-size: 24px;
        color:red;
        margin-left:5px;
        cursor: pointer;
    }
   
</style>