vue 新增table表格、新增加一行数据

需求背景

基于arcgis api为实现多个图层服务能够同时根据不同的key值进行过滤，并将结果高亮展示而封装的组件 过程中的table表格部分。table表格要求可以新增相同表头的table表格 ,行数据可以新增且每个表格中的数据互不影响。

<template>
  <div id="TableHome">
    <div class="TableTitle" v-for="(table, tableIndex) in tables" :key="tableIndex">
      <div style="border-bottom: 2px solid #797676;margin: 5px;display: flex;justify-content: space-around;">
        <a-space class="verticalInput" direction="vertical">
          <a-input v-model:value="tableTitleInput[tableIndex]" type="text" placeholder="请输入过滤器名称" @change="InputSearch" />
        </a-space>
        <div style="width: 70%"></div>
        <a-button class="CloseDiv" type="primary" @click="DeleteArr(tableIndex)">删除</a-button>

      </div>
      <a-button class="ButStyle" type="primary" @click="addRow(tableIndex)">新增</a-button>
      <table class="TableHead">
        <thead class="TableHeadTitle" style="background-color: #fafafa;">
        <tr>
          <th>图层</th>
          <th>字段</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(row, rowIndex) in table" :key="rowIndex">
          <td>
            <select v-model="row.option1" @change="updateOptions(rowIndex,row,tableIndex)">
              <option v-for="option in options1" :key="option" :value="option">{{ option }}</option>
            </select>
          </td>
          <td>
            <select v-model="row.option2" @change="updateOptions(rowIndex,row,tableIndex)">
              <option v-for="option in options2" :key="option" :value="option">{{ option }}</option>
            </select>
          </td>
          <td><a-button  @click="deleteRow(tableIndex, rowIndex)" type="primary" danger>删除</a-button></td>
        </tr>
        </tbody>
      </table>
    </div>
    <div class="tableBottom">
      <a-button type="primary" @click="addTable">添加新群组</a-button>
      <div style="width: 85%"></div>
      <a-button type="primary" @click="DataSure">确认</a-button>
    </div>


  </div>
</template>

<script>
import {ref, toRaw, watch} from 'vue';

export default {
  setup() {

    const tableTitleInput = ref([''])
    //最终所有数据
    const AllLayerTestData = ref([])
    const AllLayerData = ref([])

    const tables = ref([[]]);
    const options1 = ref(['A', 'B', 'C']);
    const options2 = ref(['X', 'Y', 'Z']);

    //表格内添加行
    const addRow = (tableIndex) => {
      if (tables.value[tableIndex] === undefined) {
        tables.value[tableIndex] = [];
      }
      tables.value[tableIndex].push({ option1: '', option2: '' });
    };
    //添加添加新群组
    const addTable = () => {
      tables.value.push([]);
      tableTitleInput.value.push('');
      console.log(toRaw(tables.value),"tables.value")
    };

    //表格中的行内容删除
    const deleteRow = (tableIndex, rowIndex,) => {
      tables.value[tableIndex].splice(rowIndex, 1);
      let DeleteData = toRaw(AllLayerTestData.value)
      DeleteData = DeleteData.map(item=>{
        if(item.key === tableIndex && item.urlList[0].key === rowIndex){
          return undefined
        }
        return item
      })
      AllLayerTestData.value = DeleteData.filter(element =>element!== undefined)
    };


    //table表格的删除
    const DeleteArr = (tableKey) => {
      let inputValue = toRaw(toRaw(tableTitleInput).value)
      if(tableKey!== -1){
        tables.value.splice(tableKey,1)
        inputValue.splice(tableKey,1)
      }
      let DeleteTableData = toRaw(AllLayerTestData.value)
      DeleteTableData = DeleteTableData.map(item=>{
        if(item.key === tableKey){
          return undefined
        }
        return item
      })
      AllLayerTestData.value = DeleteTableData.filter(element =>element!== undefined)


      console.log(toRaw(AllLayerTestData.value),"itremitemitem")



    }


    //input 输入框
    const search = () => {
      let inputValue = toRaw(toRaw(tableTitleInput).value)

    };
    const InputSearch = debounce(search,1000);
    function debounce(fn, duration = 1000) {
      let timerId = null;
      return function (...args) {
        if (timerId) {
          clearTimeout(timerId);
        }
        let context = this;
        timerId = setTimeout(() => {
          fn.apply(context, args);
        }, duration);
      };
    }

    const updateOptions = (index,row,tableIndex) => {
      let inputValue = toRaw(toRaw(tableTitleInput).value)
      let selectValue = toRaw(row)
      let keyTable = tableIndex
      let ArrData = []

      let obj = {
            key:"",
            value: "",
            urlList: []
          }
      let ObjUrlList ={
        url: "",
        value: "",
        key:""
      }
      if(inputValue[keyTable]){
        obj.value = inputValue[keyTable]
        obj.key = keyTable
        if(selectValue.option1 && selectValue.option2){
          ObjUrlList.key = index
          ObjUrlList.url = selectValue.option1
          ObjUrlList.value = selectValue.option2
          obj.urlList.push(ObjUrlList)
          toRaw(AllLayerTestData.value).push(obj)
        }
      }else{
        alert("请输入")
      }


    }

    const DataSure = () => {
      let localData = (toRaw(AllLayerTestData.value))

      const mergedData = localData.reduce((acc,obj)=>{
        if(!acc[obj.key]){
          acc[obj.key] = {key:obj.key,value:obj.value,urlList:[],}
        }
        acc[obj.key].urlList = acc[obj.key].urlList.concat(obj.urlList)
        return acc
      },{})
      console.log(mergedData)
    }

    return {
      tables,
      options1,
      options2,
      addRow,
      addTable,
      deleteRow,
      DeleteArr,
      tableTitleInput,
      InputSearch,
      updateOptions,
      AllLayerData,
      AllLayerTestData,
      DataSure
    };
  }
};
</script>

<style lang="less" scoped>
#TableHome{
  height: 100vh;
  width: 100%;
  position: relative;
}
.tableBottom{
  margin: 2%;
  display: flex;
  justify-content: space-around;
}
erticalInput{
  margin:1%;
}
.CloseDiv{
  margin:1%;
}
td,th{
  border: 1px solid black;
  padding: 5px;
}
.TableTitle{
  margin: 2%;
  border: 1px solid #151514;
}
.ButStyle{
  margin:1%;
}
select{
  width: 80%;
  height: 80%;
  border: 1px solid #868484;
  border-radius: 5px;
  outline:none
}
.TableHead{
  margin: 1%;
  width: 98%;
  height: 50px;
  text-align: center;
  line-height: 50px;
  font-weight: 100;
  font-family: 宋体， SinSun,seif;
}
.TableHeadTitle{
  font-size: 15px;
}
</style>