Vue系列---【ElementUI的表格中如何⽤switch开关表⽰状态？】1.最终效果
2.html代码
<el-table :data="tableData" border >
<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="w.status"
:active-value="1"
:inactive-value="0"
active-color="#13ce66"
inactive-color="#ff4949"
@change="w.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, w)">编辑</el-button>
<el-button size="mini" type="danger" @click="handleDelete(scope.$index, w)">删除</el-button>
</template>
</el-table-column>
</el-table>
3.js代码
methods: {
changeSwitch(status){
//调⽤后台修改接⼝
console.log(value);
}
},
data() {
return {
tableData: [
{
vue element adminkey: "XS1115",
value: "166********",
describle: "在线",
status: 1,
createName: "张三",
createTime: "1993-01-16",
},
{
key: "XS1115",
value: "166********",
describle: "在线",
status: 0,
createName: "李四",
createTime: "1993-01-16",
}
]
} }

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。