快捷導(dǎo)航

element多選表格中使用Switch開關(guān)的實(shí)現(xiàn)

更新時(shí)間：2023年07月04日 16:00:09 作者：愛吹空調(diào)的小八

當(dāng)在做后臺(tái)管理系統(tǒng)的時(shí)候，會(huì)用到用戶的狀態(tài)管理這個(gè)功能，本文主要介紹了element多選表格中使用Switch開關(guān)的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

一、此時(shí)若想跟表格中匹配幾條數(shù)據(jù)就有幾個(gè)開關(guān)時(shí)需要這樣寫：

1、要拿到當(dāng)前行的數(shù)據(jù)在template標(biāo)簽中使用**slot-scope=“scope”就可以了

2、使用時(shí)在 v-model=“scope.row.字段”就可以把后端返回的開關(guān)數(shù)據(jù)展示在表格中

<el-table-column prop="disable" label="狀態(tài)" width="120">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.mg_state"
            ></el-switch>
          </template>
</el-table-column>

二、觸發(fā)時(shí)間調(diào)用后端接口，修改開關(guān)數(shù)據(jù)

給Switch 開關(guān)加上@change="changeStatus($event, scope.row, scope.$index)"

<el-table-column prop="disable" label="狀態(tài)" width="120">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.mg_state"
              @change="changeStatus($event, scope.row, scope.$index)"  //加上觸發(fā)時(shí)間
              :active-value="scope.row.disable == 1"     //根據(jù)后端返回的數(shù)據(jù)綁定1為開的狀態(tài)
              :inactive-value="scope.row.disable == 0"   //根據(jù)后端返回的數(shù)據(jù)綁定0為關(guān)的狀態(tài)
            ></el-switch>
          </template>
  </el-table-column>

在methods中寫上方法，去調(diào)接口方法名(e,row,index) //e返回狀態(tài)true或false，row當(dāng)前行數(shù)據(jù)，index下標(biāo)

 changeStatus(e, row, index) {
    //e返回狀態(tài)，row當(dāng)前行數(shù)據(jù)，index下標(biāo)
        console.log(e, row, index);
        let userId = row.userId;
        let disable = row.disable;
    axios.get(`http://xxxxx/xx?userId=${userId}&disable=${disable}`).then((res)=>{
        console.log(res);
})
}

到此這篇關(guān)于element多選表格中使用Switch開關(guān)的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)element Switch開關(guān)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: