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

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

关键点：插槽

在开关外层用插槽包裹

 <template #default="scope"></template>

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

<el-switch
   v-model="scope.row.changer"
  :before-change="beforeChange"
  />

行为层

简单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-table
                    :data="data.tableList"
                    border
                  >
                    <el-table-column
                      align="center"
                      prop="id"
                      label="ID"
                      width="120"
                    />
                     //开关
                    <el-table-column
                      align="center"
                      prop="changer"
                      label="是否注册"
                      width="240"
                    >
                     //用插槽包裹el-switch开关
                     //v-model双向响应，注意：要data.tableList数据里有changer这个字段！！
                     <template #default="scope">
                        <el-switch
                          v-model="scope.row.changer" 
                          :before-change="beforeChange"
                        />
                      </template>
                    </el-table-column>


                    //操作
                    <el-table-column align="center" label="操作">
                      <template #default="scope">
                        <el-button  @click="handleEdit(scope.row)">编辑</el-button>
                      </template>
                    </el-table-column>
                  
                   </el-table>

//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