(vue) Insert a switch into the element-ui table

(vue) Insert a switch into the element-ui table


Effect:
insert image description here


<el-table-column property="enabled" label="启用/禁用" width="150">
  <template slot-scope="scope"> 
     <el-switch
       v-model="scope.row.enabled"
       active-color="#13ce66"
       inactive-color="#ff4949"
       active-value="true"
       inactive-value="false"
       @change="changeAutograph(scope.row)"
     ></el-switch>
   </template>
 </el-table-column>

data:

gridData: [
   {
    
    
     date: "2016-05-02",
     name: "王小虎",
     enabled: true,
   },
   {
    
    
     date: "2016-05-04",
     name: "王小虎",
     enabled: false,
   },
   {
    
    
     date: "2016-05-01",
     name: "王小虎",
     enabled: false,
   },
 ],

Guess you like

Origin blog.csdn.net/qq_44754635/article/details/131594090