可拖拽表格的難點：
（1）拖拽表格行順序，自動進行保存順序
解析：要根據表格行順序進行下載，這就意味著保存與初始化傳參需要按照表格拖拽后順序
（2）下載表格傳參是[1,2,3]數字形式，我們保存與初始化是對象數組，
解析：這個時候我們可以直接采取給{[1,2,3]}數組包層對象
（3）表格行選擇是通過復選框，這個時候我們需要去重，避免傳參重復new Set的使用
解析： let selectedNumbers = new Set(); // 使用 Set 來存儲唯一的 number 值

• 通過給el-table元素添加key屬性，可以確保在數據發生變化時，Vue會重新渲染el-table組件，從而正確地更新表格的顯示。
• 給el-table添加row-key="id"的作用是為表格的每一行指定一個唯一的key值。這個key值通常是數據源中每一條數據的唯一標識，比如id字段。

 <div>
        <task-suggest v-model="taskName" @id-select="taskidSel" />
      </div>
  <div style="margin-top:20px">
        <el-table :key="rendertable" ref="dataTable" row-key="id" :data="tableData" border class="draggable-table"
          style="width: 30%" @selection-change="handleSelectionChange">
          <el-table-column :reserve-selection="true" type="selection"> </el-table-column>
          <el-table-column prop="name" label="表名"> </el-table-column>
        </el-table>
      </div>
      ------------------------------------
      import Sortable from 'sortablejs'
       rendertable: "",
       allSelect: [],//選中的表格行形成的數組
      numberArr: [],
           tableData: [
        {
          name: "表名1",
          id: 1,//添加id為了方便區分（row-key）
          number: 17//下載的參數
        },
        {
          name: "表名2",
          id: 2,
          number: 1
        },
      ],
      ----------------------------------
       mounted() {
    this.setDraggableTable();
    this.init();
  },
  methods: {
    init() {
      let obj_get = {
        taskId: this.value1,
        formName: this.formTableName,
      }
      GetFormData(obj_get).then((res) => {
        this.result = res.data.data
        //如果初次進頁面未保存，表格默認全選
        if (this.result.length == 0) {
          this.$refs.dataTable.toggleAllSelection()
          return false
        }
        //如果有數據，直接賦值給表格
        this.tableData = this.result[0].value.list
        //如果表格number與返回數據中的number一致，就選擇當前行
        this.tableData.forEach(item => {
          if (item.ishow == 1) {
            console.log("item", item);
            this.$refs.dataTable.toggleRowSelection(item);
            delete item.ishow
          }

        })
      })
    },
    //表格拖拽行的方法
    setDraggableTable() {
      const tbody = document.querySelector('.el-table__body-wrapper tbody')
      const _this = this
      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          const currRow = _this.tableData.splice(oldIndex, 1)[0]
          _this.tableData.splice(newIndex, 0, currRow)
          console.log(_this.tableData);
        }
      })
    },
    //表格選擇多行的方法
    handleSelectionChange(val) {
      this.allSelect = val
      this.numberArr = []
      let selectedNumbers = new Set(); // 使用 Set 來存儲唯一的 number 值
      this.tableData.forEach(item => {
        val.forEach((it) => {
          if (item.number === it.number && !selectedNumbers.has(item.number)) {
            selectedNumbers.add(item.number);
            console.log('2', selectedNumbers);
          }
        });
      });
      this.numberArr = Array.from(selectedNumbers); // 將 Set 轉換為數組
    },
    //新增、保存
    switcSave() {
      this.tableData.forEach((item, index) => {
        this.allSelect.forEach((it) => {
          if (item.number === it.number) {
            item['ishow'] = 1
          } else {
            item['ishow']
          }
        })
      })
      console.log(this.tableData);
      this.obj_add = {
        taskId: this.value1,
        formName: this.formTableName,
        formNameRemark: "一鍵生成報表",
        Key: { taskId: this.value1, },
        value: { list: this.tableData },
      };
      if (this.result.length > 0) {
        this.obj_add.id = this.result[0].id
      }
      console.log('1', this.obj_add);
      switchFormData(this.obj_add).then(res => {
        console.log('0001', res);
        if (res.status == 200) {
          this.$message.success('保存成功');
          this.init()
        } else {
          this.$message.error('保存失敗');
        }
      })
    },
    //生成報表pdf or word
    handlePreview(fileType) {
      //下載表
      let tmpFileName = fileType == "pdf" ? '總報表.pdf' : "總報表.doc"
      let isPDF = fileType == "pdf" ? true : false//pdf傳true，word傳false
      DownloadAllFile(this.value1, isPDF, this.numberArr).then(res => {
        const blobUrl = window.URL.createObjectURL(res.data)
        this.downloadFileByBlob(blobUrl, tmpFileName)
        //如果下載成功就添加
        if (res.status == 200) {
          this.$message.success('下載成功');
          this.switcSave()
        } else {
          this.$message.error('下載失敗');
        }
      })
    },
    // 保存表
    downloadFileByBlob(blobUrl, filename) {
      const eleLink = document.createElement('a')
      eleLink.download = filename
      eleLink.style.display = 'none'
      eleLink.href = blobUrl
      // 觸發點擊
      document.body.appendChild(eleLink)
      eleLink.click()
      // 然后移除
      document.body.removeChild(eleLink)
      setTimeout(() => {
        this.loadingPdf = false
        this.loadingWord = false
      }, 8000)
    },
    //組件方法可以拿到每個任務的id
    taskidSel(taskid) {
      this.value1 = taskid
      console.log('hi', taskid);
    },
  },
  updated() {
    this.setDraggableTable();
  },