VUE

IVIEW +Table动态删除表格踩坑记

（一）Table组件配置：

<Table max-height="340" stripe border highlight-row class="Table-ul-li-size" :columns="beSelectColumns" :data="beSelectData"></Table>

（二）点击操作列删除某行时，报如下错误：

vue.esm.js?efeb:628 [Vue warn]: Error in v-on handler: “TypeError: Cannot read property ‘_isHighlight’ of undefined”

（三）错误原因:

Table 组件的属性highlight-row 在点击某行时会触发@on-current-change 对某行进行高亮显示，此时若删除此行，则会造成 Cannot read property ‘_isHighlight’ of undefined"的错误提示，该错误不影响功能的正常使用；
附录vue源码

<template>
  <div>
    <XModal ref="modal" :height="300" :width="900" title="选择发布系统数据源" @on-ok="ok"  @on-cancel="cancel" style="position: fixed;z-index: 9999;">
      <Tabs ref="tabs">
        <TabPane label="已选数据源" name="msgInfo">
          <div>
              <Table max-height="340" stripe border class="Table-ul-li-size" :columns="columns" :data="data"></Table>
          </div>
        </TabPane>
        <TabPane label="待选数据源" name="contactList">
          <div>
              <Form :label-width="110" class="query-form" :model="params" ref="queryForm">
                <Row class="ivu-form-inline">
                  <FormItem label="系统中/英文名称" prop="sysName">
                    <Input v-model="params.sysName" class="form-input"/>
                  </FormItem>
                   <FormItem label="数据源名称/别名" prop="dsName">
                    <Input v-model="params.dsName" class="form-input"/>
                  </FormItem>
                  <FormItem class="action-row">
                    <Button type="primary" icon="md-search" class="ivu-btn-primary-query"  @click="querySelect()">查询</Button>
                    <Button type="warning" icon="md-refresh" class="ivu-btn-chongzhi" @click="resetQuerySelect()">重置</Button>
                  </FormItem>
                </Row>
              </Form>
              <Table max-height="340" stripe border class="Table-ul-li-size" :columns="beSelectColumns" :data="beSelectData"></Table>
          </div>
        </TabPane>
    </Tabs>
    </XModal>
  </div>
</template>
<script>
import moment from "moment";
import XModal from '@/views/common/x-modal.vue';
export default {
      name:"chooseDataSource",  
  components:{
    XModal
  },
  data(){
      return{
        params: {
          dsName: '',
          sysName:''
        },
        columns: [],
        data: [],
        beSelectData:[],
        beSelectColumns:[]
      }
  },
  computed: {
    
  },
  mounted: function() {
    let column1 = {title: '系统名称', key: 'sourceNameCN'};
    let column3 = {title: '英文名称', key: 'sourceNameEN'};
    this.columns.push(column1);
    this.columns.push(column3);
    this.beSelectColumns.push(column1);;
    this.beSelectColumns.push(column3);;
    let column2 = {title: '数据源名称', key: 'name'};
    let column4 = {title: '数据源别名', key: 'alias'};
    this.columns.push(column2);
     this.columns.push(column4);
    this.beSelectColumns.push(column2);
    this.beSelectColumns.push(column4);
    this.initOptButton(this.columns,true);  
    this.initOptButton(this.beSelectColumns,false); 
  },
  watch: {
  },
  methods:{
      open(){
        this.cancel();
        this.$refs.modal.open();
      },
      initOptButton(columns,isDel) {
        let content = '增加';
        let type = 'primary';
        let icon = 'md-add';
        if(isDel) {
          content = '删除';
          type = 'error';
          icon = 'md-trash';
        }
        let optColumn = {
               title: '操作', 
               width:100,
               render: (h, params) => {
               let buttons = [];
               buttons.push(h(
                'Tooltip',
                {
                  props: {
                    content: content,
                    placement: 'top-start'
                  }
                },
                [
                  h('Button', {
                    props: {
                      type: type,
                      size: 'small',
                      icon: icon
                    },
                    style: {
                      marginRight: '10px'
                    },
                    on: {
                      click: () => {
                        if(isDel) {
                          this.del(params.row);
                        } else {
                          this.add(params.row);
                        }
                      }
                    }
                  })
                ]
              ));
            return h('div', buttons);
          }}
        columns.push(optColumn);
      },
      querySelect() {
        this.$rinvoke.ajax("DataSourceService", "queryDeDataSource", this.params).then(
          result => {
            // 要去除已选的数数据源
            this.beSelectData = result;
          },
          error => {
            this.$Message.error(error);
          }
        );
      },
       // 删除;
    del (row) {
      this.addConatToArray(row, this.data, this.beSelectData);
    },
     // 添加
    add(row) {
      this.addConatToArray(row, this.beSelectData, this.data);
    }, 
    // 删除某个数组元素，并加入到另外一个数组中;
    addConatToArray(row, delArray, addArray) {
     let res = {};
      res.id = row.id;
      res.name = row.name;
      res.alias = row.alias;
      res.sourceNameCN = row.sourceNameCN;
      res.sourceNameEN = row.sourceNameEN;
      delArray.splice(row._index,1);
      addArray.push(res);
    },
    ok(){
      debugger;
      this.$emit('func',this.data);
      this.$refs.modal.unopen();
    },
    cancel(){
      this.beSelectData = [];
      this.$refs.modal.unopen();
    }
  }
}
</script>

<style lang="less" scoped>
.form-input {
  width: 200px;
}
</style>

（四）动态添加删除表记录原理

说白了就是对绑定数组的增，删实现；