vue3+elementPlusel-table表格里设置switch开关

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

关键点：插槽

在开关外层用插槽包裹

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

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

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

行为层

简单demo版

1.  
   const beforeChange = () => {
2.  
   return new Promise((resolve) => {
3.  
   setTimeout(() => {
4.  
   ElMessage.success("Switch success");
5.  
   return resolve(true);
6.  
   }, 1000);
7.  
   });
8.  
   };

请求后台接口版

1.  
   const gettableList = (id) = >{
2.  
   xxx接口.({
3.  
   id:id
4.  
   }).then((res)=>{
5.  
   data.tableList = res.data
6.  
    
7.  
   })
8.  
   }

 完整代码：

1.  
   //html层
2.  
   <el-table
3.  
   :data="data.tableList"
4.  
   border
5.  
   >
6.  
   <el-table-column
7.  
   align="center"
8.  
   prop="id"
9.  
   label="ID"
10.  
    width="120"
11.  
    />
12.  
    //开关
13.  
    <el-table-column
14.  
    align="center"
15.  
    prop="changer"
16.  
    label="是否注册"
17.  
    width="240"
18.  
    >
19.  
    //用插槽包裹el-switch开关
20.  
    //v-model双向响应，注意：要data.tableList数据里有changer这个字段！！
21.  
    <template #default="scope">
22.  
    <el-switch
23.  
    v-model="scope.row.changer"
24.  
    :before-change="beforeChange"
25.  
    />
26.  
    </template>
27.  
    </el-table-column>
28.  
     
29.  
     
30.  
    //操作
31.  
    <el-table-column align="center" label="操作">
32.  
    <template #default="scope">
33.  
    <el-button @click="handleEdit(scope.row)">编辑</el-button>
34.  
    </template>
35.  
    </el-table-column>
36.  
     
37.  
    </el-table>
38.  
     
39.  
    //data层
40.  
    const changer = ref(false);
41.  
     
42.  
    const data= reactive({
43.  
    tableList:[]//table数据
44.  
    })
45.  
     
46.  
    //js层，demo版本
47.  
    const beforeChange = () => {
48.  
    return new Promise((resolve) => {
49.  
    setTimeout(() => {
50.  
    ElMessage.success("Switch success");
51.  
    return resolve(true);
52.  
    }, 1000);
53.  
    });
54.  
    };
55.  
     
56.  
    //js层，实战版本,与后台接口交互
57.  
    const gettableList = (id) = >{
58.  
    xxx接口.({
59.  
    id:id
60.  
    }).then((res)=>{
61.  
    //将数据传给el-table绑定的:data=>data.tableList
62.  
    data.tableList = res.data
63.  
     
64.  
    })
65.  
    }
66.  
     
67.  
    //最后将请求函数挂载到vue视图上
68.  
    onMounted(() => {
69.  
    gettableList ()
70.  
    })

这篇好文章是转载于：学新通技术网