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",
        }
]        
    }
}