奔三路 - 你30岁前的学习路!

奔三路学习网

当前位置: 主页 > vue面试通 > Element框架 >

Element.UI里面的switch开关,小白练手案例源码

时间:2018-03-02 09:29来源:未知 作者:admin
使用Element.UI实现一个开关的联动小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 = a

使用Element.UI实现一个开关的联动小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>
(责任编辑:admin)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
发布者资料
史密斯 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2017-11-24 11:11 最后登录:2018-09-02 11:09

关注奔三路