6月22日，上海·源创会，云技术专场火热报名中

forked from 鹏鹏 / avue-doc

加入 Gitee

与超过 1200万开发者一起发现、参与优秀开源项目，私有仓库也完全免费：）

克隆/下载

tabs.md 1.82 KB

<script>
export default {
  data(){
    return {
       type:{},
       option:{
          column: [{
            icon:'el-icon-info',
            label: '选项卡1',
            prop: 'tab1',
          }, {
            icon:'el-icon-warning',
            label: '选项卡2',
            prop: 'tab2',
          }, {
            icon:'el-icon-question',
            label: '选项卡3',
            prop: 'tab3',
          }]
       }
    }
  },
  created(){
    this.type = this.option.column[0];
  },
  methods:{
    handleSubmit(form){
      this.$message.success(JSON.stringify(form))
    },
    handleChange(column) {
      this.type = column
      this.$message.success(JSON.stringify(column))
    }
  }
}
</script>

# Tabs 选项卡
:::tip
 1.0.0+
::::
常用的表单和表格选项卡，可以与form他组件组合使用

## 普通用法
:::demo  使用方法和常规用法一样`option`配置结构体，同时包含了一个`change`回调事件
```html
<avue-tabs :option="option" @change="handleChange"></avue-tabs>
<span v-if="type.prop==='tab1'">选项卡内容1</span>
<span v-else-if="type.prop==='tab2'">选项卡内容2</span>
<span v-else-if="type.prop==='tab3'">选项卡内容3</span>
<script>
export default {
  data(){
    return {
        type:{},
        option:{
          column: [{
            icon:'el-icon-info',
            label: '选项卡1',
            prop: 'tab1',
          }, {
            icon:'el-icon-warning',
            label: '选项卡2',
            prop: 'tab2',
          }, {
            icon:'el-icon-question',
            label: '选项卡3',
            prop: 'tab3',
          }]
        }
    }
  },
  created(){
    this.type = this.option.column[0];
  },
  methods:{
    handleChange(column) {
      this.type = column
      this.$message.success(JSON.stringify(column))
    }
  }
}
</script>

```
:::

一键复制编辑原始数据按行查看历史

提交于 2020-05-30 20:51 . init docs

<script> export default { data(){ return { type:{}, option:{ column: [{ icon:'el-icon-info', label: '选项卡1', prop: 'tab1', }, { icon:'el-icon-warning', label: '选项卡2', prop: 'tab2', }, { icon:'el-icon-question', label: '选项卡3', prop: 'tab3', }] } } }, created(){ this.type = this.option.column[0]; }, methods:{ handleSubmit(form){ this.$message.success(JSON.stringify(form)) }, handleChange(column) { this.type = column this.$message.success(JSON.stringify(column)) } } } </script>

Tabs 选项卡

:::tip 1.0.0+ :::: 常用的表单和表格选项卡，可以与form他组件组合使用

普通用法

:::demo 使用方法和常规用法一样option配置结构体，同时包含了一个change回调事件

<avue-tabs :option="option" @change="handleChange"></avue-tabs>
<span v-if="type.prop==='tab1'">选项卡内容1</span>
<span v-else-if="type.prop==='tab2'">选项卡内容2</span>
<span v-else-if="type.prop==='tab3'">选项卡内容3</span>
<script>
export default {
  data(){
    return {
        type:{},
        option:{
          column: [{
            icon:'el-icon-info',
            label: '选项卡1',
            prop: 'tab1',
          }, {
            icon:'el-icon-warning',
            label: '选项卡2',
            prop: 'tab2',
          }, {
            icon:'el-icon-question',
            label: '选项卡3',
            prop: 'tab3',
          }]
        }
    }
  },
  created(){
    this.type = this.option.column[0];
  },
  methods:{
    handleChange(column) {
      this.type = column
      this.$message.success(JSON.stringify(column))
    }
  }
}
</script>

:::

马建仓 AI 助手

尝试更多

代码解读

代码找茬

代码优化

JavaScript

1

https://gitee.com/greentreecloud/avue-doc.git

git@gitee.com:greentreecloud/avue-doc.git

greentreecloud

avue-doc

avue-doc

master