vue3?element?plus?table?selection展示數據,默認選中功能方式

更新時間：2024年07月25日 10:29:53 作者：蠟筆大杺

這篇文章主要介紹了vue3?element?plus?table?selection展示數據,默認選中功能方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue3 element plus table selection展示數據,默認選中

當打開表格數據時，可能會根據后臺返回的數據，默認選中符合條件的行

這樣我們就用到了el-table-column，設 type 屬性為 selection

1.表格的第一行,設置為

 <el-table-column type="selection" width="25" />

2.table上定義ref屬性,并且定義這個變量

><script setup lang="ts">
const orgidslistRef = ref<InstanceType<typeof ElTable>>();
<script />

3.在事件中配置一下

  //遍歷表格的數據，再遍歷需要在表格中反顯的數據，兩者的id一致
  //創(chuàng)建一個空數組用來存放默認數據
  //allprojectsortids指的是存放表格顯示數據的數組，和table綁定的data數據來源一致
  //item我這里是存放條件數組
  //假設:item=[1,2,3],我們需要把allprojectsortids數組中id在item中的行默認選中,即可進行 下面的操作,具體判斷操作自行修改.
  const listNew = [];//需要注意的是,這個數組中存放的數據要包含allprojectsortids數組中符合條件行全部的數據,不能只存放id,直接把那一行的數據全部存里面.
async  function edititemcondition(){
 await orgidslistRef.value.clearSelection();//清空選中狀態(tài)
  allprojectsortids.value.forEach(it => {
    if (item.value.projectsortidslist_ext.indexOf(it.value) > -1) {
      // 把判斷出來的默認表格數據push到創(chuàng)建的數組中
      listNew.push(it);
    }
  });


  //方法一 一定設置async  
  // await orgidslistRef.value.clearSelection();//清空選中狀態(tài)
   //使用for循環(huán)方法處理復雜字段 推薦使用
   //orgidslistRef.value定義的ref
   // allprojectsortids.value原表格數據
   // listNew選中的數據
   
  for (let i = 0, i <  listNew.length; i++) {
    orgidslistRef.value.toggleRowSelection(
      allprojectsortids.value.find(item => {
        return listNew[i].value === item.value; // 注意這里尋找的字段要唯一，示例僅參考
      }),
      true
    );
  }


  //方法二
  if (listNew.length > 0) {
    //再遍歷數組，將數據放入方法中
    listNew.forEach(row => {
      setTimeout(() => {
        orgidslistRef .value.toggleRowSelection(row, true);
      }, 0);
    });
  }  }

修改選中的行，重新賦值

function multipleOrgidslist_ext(val) {
//val選中行的數據
  console.log("%c搜索", "color:red;font-size:30px", val);
  if (val) {
    item.value.orgidslist_ext = [];
    const temp = [];
    for (let i = 0; i < val.length; i++) {
      temp.push(val[i].value);
    }
    item.value.projectsortidslist_ext= temp;
  }
}

//定義的數組
const allprojectsortids = ref(
[
  {
    date: '2016-05-03',
    id:1,
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
  id:2,
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id:3,
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id:4,
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id:5,
    date: '2016-05-08',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },

]
)

結果：