Vue系列---【ElementUI的表格中如何用switch開關表示狀態？】

1.最終效果

 

 2.html代碼

 <el-table :data="tableData" border style="width: 100%">
      <el-table-column type="index" label="序號" width="50"></el-table-column>
      <el-table-column prop="key" label="參數" width="80"></el-table-column>
      <el-table-column prop="value" label="參數值" width="180"></el-table-column>
      <el-table-column prop="describle" label="描述" width="180"></el-table-column>
      <el-table-column prop="status" label="狀態" width="100"> <template slot-scope="scope"> <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" active-color="#13ce66" inactive-color="#ff4949" @change="changeSwitch(scope.row.status)" /> </template> </el-table-column>
      <el-table-column prop="createName" width="100" label="創建人"></el-table-column>
      <el-table-column prop="createName" width="100" label="更新人"></el-table-column>
      <el-table-column prop="createTime" label="創建時間" width="110"></el-table-column>
      <el-table-column prop="createTime" label="更新時間" width="110"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">編輯</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">刪除</el-button>
        </template>
      </el-table-column>
    </el-table>

3.js代碼

  methods: {
      changeSwitch(status){
        //調用后台修改接口
          console.log(value);
      }
  },
  data() {
    return {
      tableData: [
        {
          key: "XS1115",
          value: "16637531877",
          describle: "在線",
 status: 1,
          createName: "張三",
          createTime: "1993-01-16",
        },
        {
          key: "XS1115",
          value: "16637531877",
          describle: "在線",
 status: 0,
          createName: "李四",
          createTime: "1993-01-16",
        }
]        
    }
}