自定义操作栏

TIP

1.0.0+

普通用法

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

<avue-crud :data="data" :option="option">
  <template slot-scope="scope" slot="menu">
     <el-button icon="el-icon-check" size="small">自定义菜单按钮</el-button>
  </template>
</avue-crud>
<script>
export default {
    data() {
      return {
        data: [
          {
            name:'张三',
            sex:'男'
          }, {
            name:'李四',
            sex:'女'
          }
        ],
        option:{
          menuWidth:380,
          page:false,
          align:'center',
          menuAlign:'center',
          column:[
             {
              label:'姓名',
              prop:'name'
            }, {
              label:'性别',
              prop:'sex'
            }
          ]
        },
      };
    }
}
</script>

隐藏

menu属性接受一个Boolean的属性达到隐藏的效果，默认为false

<avue-crud :data="data" :option="option1"></avue-crud>
<script>
export default {
    data() {
      return {
        data: [
          {
            name:'张三',
            sex:'男'
          }, {
            name:'李四',
            sex:'女'
          }
        ],
        option1:{
          menu:false,
          page:false,
          align:'center',
          menuAlign:'center',
          column:[
             {
              label:'姓名',
              prop:'name'
            }, {
              label:'性别',
              prop:'sex'
            }
          ]
        },
      };
    }
}
</script>