vue3+elementPlus：el-table表格里设置switch开关

vue3+elementPlus：el-table表格里设置switch开关

关键点：插槽

在开关外层用插槽包裹

里面写v-model用来绑定字段

行为层

简单demo版

const beforeChange = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      ElMessage.success("Switch success");
      return resolve(true);
    }, 1000);
  });
};

请求后台接口版

const gettableList = (id) = >{
  xxx接口.({
   id:id
}).then((res)=>{
   data.tableList = res.data
   
})
}

---

 完整代码：

//html层
                  
                    
                     //开关
                    
                     //用插槽包裹el-switch开关
                     //v-model双向响应，注意：要data.tableList数据里有changer这个字段！！
                     
                    


                    //操作
                    
                      
                    
                  
                   

//data层
const changer = ref(false);

const data= reactive({
   tableList:[]//table数据
})

//js层，demo版本
const beforeChange = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      ElMessage.success("Switch success");
      return resolve(true);
    }, 1000);
  });
};

//js层，实战版本,与后台接口交互
const gettableList = (id) = >{
  xxx接口.({
   id:id
}).then((res)=>{
   //将数据传给el-table绑定的:data=>data.tableList
   data.tableList = res.data
   
})
}

//最后将请求函数挂载到vue视图上
onMounted(() => {
  gettableList ()
})

---

作者上一篇文章，

解决前端项目问题：时间格式化dayjs在vue里的使用，与后端进行交互_意初的博客-CSDN博客使用 day.js，使用 npm安装：npm install dayjs --save1.执行安装依赖2.引入分为两种方法第一个是在单文件里导入xxx.vue里面引入第二个全局引入是在main.js里引用3.获取当前时间格式化4.搭配后端接口使用，将时间格式化传给后端，即可获取需要的数据。https://blog.csdn.net/weixin_43928112/article/details/127093907