iview表格里面Switch 开关

最新推荐文章于 2023-11-15 14:24:06 发布

不会桥敲代码的程序袁

最新推荐文章于 2023-11-15 14:24:06 发布

阅读量1.8k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： iview 文章标签： vue vue.js html5

本文链接：https://blog.youkuaiyun.com/qq_44701537/article/details/103696169

iview 专栏收录该内容

2 篇文章

订阅专栏

//swich 开关的操作
function getModbusTcp(ip, port, msg) {
            $.ajax({
                type: "get",
                url: "http://192.168.1.1:8888/ModbusTcp/?ip=" + ip + "&port=" + port + "&msg=" + msg + "",
                dataType: 'jsonp', //【jsonp进行跨域请求 只支持get】

                success: function (data) { //【成功回调】
                },
                error: function (xhr, type) { //【失败回调】
                }
            });
        }

 {
                        title: '状态',
                        key: 'kg',
                        render:function(h,params) {
                            const bgc=params.row.kg==0?'#f93838':"#13fe65"
                            console.log(params.row.kg);
                            
                            return h('div', {
                                style:{
                                    width:'20px',
                                    height:'20px',
                                    borderRadius: '20px',
                                    background:bgc
                                }
                            });
                        },
                    },
					 {
                        title: '操作',
                        width: 180,
                        align: 'center',
                        render: function (h, params) {
                            return h('div', [
                                h('i-switch', {
                                    props: {
                                        type: 'primary',
                                        size: 'large',
                                        value: params.row.kg,
                                        'true-value': '1',
                                        'false-value': '0'
                                    },
                                    scopedSlots: {
                                        open: function () { return h("span", "开启") },
                                        close: function () { return h("span", "关闭") }
                                    },
                                    on: {
                                        'on-change': function (value) {
                                            params.row.kg = value;
                                            console.log('kg:' + params.row.kg);
                                            if (params.row.kg == 1) {
                                                getModbusTcp(params.row.ip, params.row.port, params.row.open)
                                            } else {
                                                getModbusTcp(params.row.ip, params.row.port, params.row.close)

                                            }
                                        }
                                    }
                                }, ''),

在这里插入图片描述