iview tabs里面放入 i-switch slot的写法

简介: iview tabs里面放入 i-switch slot的写法
        {
          'title': '状态',
          'key': 'status',
          render: (h, params) => {
            return h(
              'i-switch',
              {
                props: {
                  trueValue: 1,
                  falseValue: 0,
                  beforeChange: () => {
                    // if (status === 0)
                    console.log(params.row.status)
                    if (params.row.status === 1) {
                      console.log('000')
                      return new Promise((resolve) => {
                        this.$Modal.confirm({
                          title: '确认停用',
                          content: '停用商品后,该商品将不允许继续被选择,但不影响当前售卖。如果希望取消商品售卖,请在售货机详情中进行操作。',
                          onOk: () => {
                            this.changeStatus(params.row.status, params.row.id)
                          }
                        })
                      })
                    } else {
                      console.log('111')
                      this.changeStatus(params.row.status, params.row.id)
                    }
                  },
                  value: Number(params.row.status),
                  size: 'large'
                }
              },
              [
                h('span', {
                  slot: 'open'
                }, '启用'),
                h('span', {
                  slot: 'close'
                }, '停用')
              ]
            )
          }
        },
    render:(h,params)=>{
        return h('i-switch',{
            props:{
                value:params.row.status
                size:'large'
            },
            scopedSlots:{
                open:()=>h('span','开启'),
                close:()=>h('span','停用')
            }
        })
    }

相关文章
element-ui中Select 选择器异步加载下一页
element-ui中Select 选择器异步加载下一页
|
8月前
|
JavaScript API
vue插槽slot、slot-scope、v-slot的区别以及嵌套插槽的使用
可以将 slot 理解成一个占位的东西,我们提前在模板中放置一个占位的标记,当其他地方要使用模板时就可以通过标记再传进来具体的内容,这样就可以实现更强的复用能力。
146 2
|
JavaScript
element-ui(vue版)使用switch时change回调函数中的形参传值问题
element-ui(vue版)使用switch时change回调函数中的形参传值问题
164 0
|
7月前
|
JavaScript
如何解决ElementUI中的el-tab-pane组件使用v-show不生效的问题?
如何解决ElementUI中的el-tab-pane组件使用v-show不生效的问题?
467 3
|
8月前
|
前端开发 JavaScript Linux
[React] 实现点击Button将文件名赋值Input
[React] 实现点击Button将文件名赋值Input
【element-ui用法】el-radio-group默认选择和数据回显问题的解决方案
【element-ui用法】el-radio-group默认选择和数据回显问题的解决方案
923 0
|
JavaScript API
Vue3中无法为el-tree-select设置反选问题分析
Vue3中无法为el-tree-select设置反选问题分析
253 0
|
JavaScript
巧妙使用Vue.extend继承组件实现el-table双击可编辑(不使用v-if和v-else)
巧妙使用Vue.extend继承组件实现el-table双击可编辑(不使用v-if和v-else)
505 0
|
JavaScript 前端开发
Vue3:elementplus表格header-cell-class-name回调方法使用
Vue3:elementplus表格header-cell-class-name回调方法使用
1212 0
Vue3:elementplus表格header-cell-class-name回调方法使用
|
JSON JavaScript 前端开发
Vue组件datepicker 400 后端Source: (PushbackInputStream); line: 1, column: 111] (through reference chain)
Vue组件datepicker 400 后端Source: (PushbackInputStream); line: 1, column: 111] (through reference chain)
2298 0
Vue组件datepicker 400 后端Source: (PushbackInputStream); line: 1, column: 111] (through reference chain)