element UI實現表格中添加開關控制按鈕

我使用的是element ui V1.4.3
如下圖是我要實現的效果：

<template>
<div>
    <el-button type="text" @click="dialogTableVisible = true">點擊顯示 Dialog</el-button>
    <el-dialog title="個性化菜單設置" :visible.sync="dialogTableVisible" size="tiny" >
        <el-form :model="form">
            <el-form-item label="左側菜單欄默認狀態" >
                <el-select v-model="form.region" placeholder="請選擇">
                    <el-option label="展開" value="extendedmenus"></el-option>
                    <el-option label="收起" value="retractmenus"></el-option>
                </el-select>               
            </el-form-item>
             
             <el-form-item>
                <el-table 
                 :data="gridData"
                 border
                 height="300"
                 >
                    <el-table-column property="name" label="菜單名稱" ></el-table-column>
                    <el-table-column property="menusstate" label="默認展開">
                        <template scope="scope">
                        <el-switch
                            on-text ="是"
                            off-text = "否"
                            on-color="#5B7BFA"
                            off-color="#dadde5"
                            v-model="scope.row.menusstate" 
                            @change=change(scope.$index,scope.row)                
                        >
                        </el-switch>
                        </template>
                    </el-table-column>
                </el-table>
             </el-form-item>

             <el-form-item>
                <el-button class="menusStateTrue" >確定</el-button>           
                <el-button>取消</el-button>            
             </el-form-item>
           
            
     </el-form>
     </el-dialog> 
</div>  
  </template>

  <script>
    export default {
        data() {
            return {
              dialogTableVisible: false,  //是否顯示 Dialog  
              form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
              },
              gridData:[
                {
                   name:"划款指令",
                   menusstate:false,
                },
                {
                   name:"基礎信息管理",
                   menusstate:false,
                },
                {
                    name:"監管報表",
                    menusstate:false,
                },
                {
                   name:"划款指令",
                   menusstate:false,
                },
                {
                   name:"基礎信息管理",
                   menusstate:false,
                },
                {
                    name:"監管報表",
                    menusstate:false,
                },
                {
                   name:"划款指令",
                   menusstate:false,
                },
                {
                   name:"基礎信息管理",
                   menusstate:false,
                },
                {
                    name:"監管報表",
                    menusstate:false,
                },
                {
                   name:"划款指令",
                   menusstate:false,
                },
                {
                   name:"基礎信息管理",
                   menusstate:false,
                },
                {
                    name:"監管報表",
                    menusstate:false,
                },
                {
                   name:"划款指令",
                   menusstate:false,
                },
                {
                   name:"基礎信息管理",
                   menusstate:false,
                },
                {
                    name:"監管報表",
                    menusstate:false,
                },
                {
                   name:"划款指令",
                   menusstate:false,
                },
                {
                   name:"基礎信息管理",
                   menusstate:false,
                },
                {
                    name:"監管報表",
                    menusstate:false,
                }
              ],
                     
            }
        },
        methods:{
           change:function(index,row){
                console.log(index,row);
           }
        }
    }
  </script>
  <style>
    .menusStateTrue{
        background: #5B7BFA;
        color:white;
    }
     .menusStateTrue:hover{
        background: #5B7BFA;
        color:white;
    }

  </style>

剛開始沒寫 template scope="scope"，然后就不知道el-switch中的v-model的值該怎么獲取，后面加上 template scope="scope"， v-model="scope.row.menusstate" 就可以達到想要的效果，關於template scope="scope"的解釋，可以看下這篇文：
vue中的scope使用詳解

轉載請注明出處：https://www.cnblogs.com/fangnianqin/p/8819862.html