# 操作栏配置

# 操作栏隐藏

menu属性接受一个Boolean的属性达到隐藏操作栏的效果,默认为false

<avue-crud :data="data" :option="option1"></avue-crud>

<script>
export default {
    data() {
      return {
        data: [
          {
            name:'张三',
            sex:'男'
          }, {
            name:'李四',
            sex:'女'
          }
        ],
        option1:{
          menu:false,
          column:[
             {
              label:'姓名',
              prop:'name'
            }, {
              label:'性别',
              prop:'sex'
            }
          ]
        },
      };
    }
}
</script>
Expand Copy

# 操作栏宽度和其它属性

menuWidth属性接受一个值

<avue-crud :data="data" :option="option1"></avue-crud>

<script>
export default {
    data() {
      return {
        data: [
          {
            name:'张三',
            sex:'男'
          }, {
            name:'李四',
            sex:'女'
          }
        ],
        option1:{
          menuWidth:100,
          menuAlign:'center',
          menuHeaderAlign:'center',
          column:[
             {
              label:'姓名',
              prop:'name'
            }, {
              label:'性别',
              prop:'sex'
            }
          ]
        },
      };
    }
}
</script>
Expand Copy

# 查看按钮

viewBtn配置为true即可

<avue-crud ref="crud" :option="option" :data="data"></avue-crud>
<script>
export default {
  data(){
    return {
       data:[
         {
           name:'张三',
           age:12,
           address:'码云的地址'
         }, {
           name:'李四',
           age:13,
           address:'码云的地址'
         }
       ],
       option:{
          viewBtn:true,
          editBtn:false,
          delBtn:false,
          column: [{
            label: '姓名',
            prop: 'name'
          },{
            label: '年龄',
            prop: 'age'
          },{
            label:'地址',
            span:24,
            prop:'address',
            type:'textarea'
          }]
       }
    }
  }
}
</script>

Expand Copy

# 复制按钮

TIP

2.6.14+

{}

设置copyBtntrue时激活行复制功能,复制的数据会去除rowKey配置的主键


{{form}}
<avue-crud :data="data" :option="option" v-model="form"></avue-crud>

<script>
export default {
    data() {
      return {
        form:{},
        data: [
          {
            ids:1,
            name:'张三',
            sex:'男'
          }, {
            ids:2,
            name:'李四',
            sex:'女'
          }
        ],
        option:{
          rowKey:'ids',
          copyBtn:true,
          delBtn:false,
          column:[
             {
              label:'姓名',
              prop:'name'
            }, {
              label:'性别',
              prop:'sex'
            }
          ]
        },
      };
    }
}
</script>
Expand Copy

# 打印按钮

printBtn设置为true即可开启打印功能

<avue-crud :option="option" :data="data"></avue-crud>
<script>
export default {
  data(){
    return {
       data:[{
          text1:'内容1-1',
          text2:'内容1-2'
       },{
          text1:'内容2-1',
          text2:'内容2-2'
       }],
       option:{
          menu:false,
          printBtn:true,
          column: [{
            label: '列内容1',
            prop: 'text1',
          }, {
            label: '列内容2',
            prop: 'text2',
          }]
       }
    }
  }
}
</script>

Expand Copy

# 导出按钮

excelBtn设置为true即可开启打印功能

<avue-crud :option="option" :data="data"></avue-crud>
<script>
export default {
  data(){
    return {
       data:[{
          text1:'内容1-1',
          text2:'内容1-2'
       },{
          text1:'内容2-1',
          text2:'内容2-2'
       }],
       option:{
          menu:false,
          excelBtn:true,
          column: [{
            label: '列内容1',
            prop: 'text1',
          }, {
            label: '列内容2',
            prop: 'text2',
          }]
       }
    }
  }
}
</script>

Expand Copy

# 筛选按钮

TIP

常用自定筛选条件

filterBtn默认为true,可以自定义过滤条件,根据filter函数回调

<avue-crud :option="option" :data="data" @filter="filterChange"></avue-crud>
<script>
export default {
  data(){
    return {
       data:[{
          text1:'内容1-1',
          text2:'内容1-2'
       },{
          text1:'内容2-1',
          text2:'内容2-2'
       }],
       option:{
          filterBtn:true,
          align:'center',
          column: [{
            label: '列内容1',
            prop: 'text1',
          }, {
            label: '列内容2',
            prop: 'text2',
          }]
       }
    }
  },
  methods:{
    filterChange(result) {
      this.$message.success('过滤器' + JSON.stringify(result))
    },
  }
}
</script>

Expand Copy

# 自定义操作栏

有时候我们自定义按钮,操作栏宽度不够,它是不能自适应的,需要设置menuWidth属性去改变宽度,同时在menu名字的卡槽接受我们自定义的dom,返回的scope中返回了当前行row以及其他我们需要的数据

<avue-crud :data="data" :option="option">
  <template slot-scope="{type,size}" slot="menu">
     <el-button icon="el-icon-check" :size="size" :type="type">自定义菜单按钮</el-button>
  </template>
</avue-crud>

<script>
export default {
    data() {
      return {
        data: [
          {
            name:'张三',
            sex:'男'
          }, {
            name:'李四',
            sex:'女'
          }
        ],
        option:{
          menuWidth:380,
          column:[
             {
              label:'姓名',
              prop:'name'
            }, {
              label:'性别',
              prop:'sex'
            }
          ]
        },
      };
    }
}
</script>
Expand Copy
Last Updated: 3/18/2022, 5:18:38 PM