问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

vue初学者,我正在用vue写一个后台管理系统,有用到Element里面的switch开关,怎么去用开关控制表格里面的状态显示

头像
xioa灬沈
    17510

    图片描述

    如图所示,我需要的效果是,操作里面的开关,去控制账号状态的启用与停用,求大佬指教下,有dome嘛？可以给dome参考参考,请前端的前辈们帮帮忙,谢谢

    vue.jsswift
    阅读 9.2k
    2 个回答
    得票最新
    头像
    luozz
      5.8k3629
      ✓ 已被采纳

      给你写了个demo，希望能对你有所帮助！主要要学习到其中的原理，多加理解

      <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>tab</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
    <div id="app">
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="name" label="姓名" width="120">
            </el-table-column>
            <el-table-column label="账号状态" width="300">
                <template slot-scope="scope">
                    <el-button type="text" size="small" v-if="scope.row.status">启用中</el-button>
                    <el-button type="text" size="small" v-else>已停用</el-button>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="100">
                <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small" v-if="scope.row.status">停用</el-button>
                <el-button @click="handleClick(scope.row)" type="text" size="small" v-else>启用</el-button>
                <el-button type="text" size="small">查看</el-button>
            </template>
            </el-table-column>
        </el-table>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            methods: {
                handleClick(row) {
                    return row.status = !row.status;
                }
            },
            data() {
                return {
                    tableData: [{
                        name: 'luozz0',
                        status: true
                    }, {
                        name: 'luozz1',
                        status: false
                    }, {
                        name: 'luozz2',
                        status: true
                    }, {
                        name: 'luozz3',
                        status: true
                    }]
                }
            }
        })
    </script>
</body>
</html>
      头像
      小韩
        772
        
<template slot-scope="scope">
  <button v-if="scope.row.xx">启用</button>
  <button v-else >停用</button>
</template>
        查看全部 2 个回答
        推荐问题