iview表格列表扩展

iview组件表格列表扩展技术

子组件需要另新建文件引入父组件代码中

<template>
  <div>
    <Row class="expand-row">
      <Col>
        <Table
          highlight-row
          :show-header="false"
          border
          ref="selection"
          :columns="columns4"
          :data="data1"
          @on-selection-change="selectChildCheck"  //已选择的数据
          :row-class-name="rowClassName"
          class="expanddddd-table"
        ></Table>
      </Col>
    </Row>
  </div>
</template>

 selectChildCheck (selection) {
   
      console.log(selection);
      this.childCheckedList = selection;  //将已选的储存到数组中
    },
        
 监听储存数组的数据变化
   watch:{
   
    childCheckedList:{
   
        handler(newVal, oldVal){
   
        // console.log(newVal,oldVal)
        if(newVal.length < oldVal.length){
   
          // 减少： 筛选出被减少的的那个，然后传输到父组件做处理
          console.log('-------childCheckedList减少--------			',this.childCheckedList);

          let oldArr = oldVal.map(item => JSON.stringify(item));
          let newArr = newVal.map(item => JSON.stringify(item));
          console.log(newArr,oldArr)
          let diff = oldArr.