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

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

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

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

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

2、使用時在 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ā)時間調(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ā)時間
              :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當前行數(shù)據(jù)，index下標

 changeStatus(e, row, index) {
    //e返回狀態(tài)，row當前行數(shù)據(jù)，index下標
        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)的實現(xiàn)的文章就介紹到這了,更多相關(guān)element Switch開關(guān)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: