1、HTML
<Table border :columns="tableColumns" :data="tableData" :loading="tableLoading">
<!-- 是否开启:0:启用,1:禁用 -->
<template slot-scope="{ row, index }" slot="isStatus">
<i-switch v-model="row.isStatus1" @on-change="handleChange(row)">
<span :slot="0">开</span>
<span :slot="1">关</span>
</i-switch>
</template>
</Table>
2、JS
export default {
data() {
return {
tableColumns:[
{
title: '序号',
type: 'index',
align: 'center',
width:"80"
},{
title: '状态',
key: 'isStatus',//是否开启:0:启用,1:禁用
align: 'center',
slot: 'isStatus'
}
]
}
},
methods: {
getTableData(){
dragonListApi.getRulesPage().then(res=>{
if(res.code==0){
var resData = res.data.records;
resData.forEach((ele)=>{
//接口返的状态是0--启用,1--禁用。Switch组建的v-modal值为bool,所以需要转一下。
ele.isStatus1 = ele.isStatus===0 ? true : false
})
this.tableData = resData
}else{
this.$Message.error({
content: res.message,
duration: 1.5,
closable:true,
});
}
}).catch((error)=>{
console.log(error)
that.$Message.error({
content: error,
duration: 1.5,
closable:true,
});
})
},
}
}
3、效果图: