image.png

在table中引入了多選復選框

 <el-table-column
              type="selection"
              width="55"
              align="center"
              :reserve-selection="true"
            >
            </el-table-column>

引入后 復選框的功能是element-ui自帶的多選功能
想要實現(xiàn)單選 代碼如下：
javascript

<el-table
        :data="processedTableData"
        border
        highlight-current-row
        @selection-change="clickcheck"
        ref="processedTableData"
        row-key="projectId"
        style="width: 100%"
      >

在table中的@selection-change綁定點擊事件，并且設置ref以及row-key唯一的id值，并且在復選框中設置reserve-selection指定row+key保留數(shù)據(jù)更新之前的數(shù)據(jù)（作用：有時候表格的數(shù)據(jù)是有分頁的,分頁一般是要重新請求后臺數(shù)據(jù),這樣上一頁也就是上一次請求的數(shù)據(jù)的選中狀態(tài)就沒有了）

 clickcheck(val) {
      if (val.length >= 2) {
        let arrays = val.splice(0, val.length - 1);
        arrays.forEach((row) => {
          this.$refs.processedTableData.toggleRowSelection(row);
        });
      }
      this.practiceList = val;
      console.log(this.practiceList);
   
    },

以上代碼就能實現(xiàn)單選功能了