表头配置

固定表头

暂无数据

设置height时当表格的高度超过设定值，就会出现滚动条，从而达到固定表头的效果

<template>
  <avue-crud :data="data"
             :option="option"></avue-crud>
</template>
<script>
export default {
  data () {
    return {
      data: [
        {
          name: '张三',
          sex: '男'
        }, {
          name: '李四',
          sex: '女'
        }, {
          name: '张三',
          sex: '男'
        }, {
          name: '李四',
          sex: '女'
        }, {
          name: '张三',
          sex: '男'
        }, {
          name: '李四',
          sex: '女'
        }, {
          name: '张三',
          sex: '男'
        }, {
          name: '李四',
          sex: '女'
        }
      ],
      option: {
        height: 300,
        column: [
          {
            label: '姓名',
            prop: 'name',
            width: 200,
            fixed: true
          }, {
            label: '性别',
            width: 300,
            prop: 'sex'
          }, {
            label: '日期',
            width: 300,
            prop: 'datetime'
          }, {
            label: '地址',
            width: 300,
            prop: 'address'
          }
        ]
      },
    };
  },
  methods: {
  }
}
</script>

显示代码复制代码复制代码

隐藏表头

暂无数据

设showHeader属性为false即可隐藏表头

<template>
  <avue-crud :data="data"
             :option="option"></avue-crud>
</template>
<script>
export default {
  data () {
    return {
      data: [
        {
          name: '张三',
          sex: '男'
        }, {
          name: '李四',
          sex: '女'
        }
      ],
      option: {
        showHeader: false,
        column: [
          {
            label: '姓名',
            prop: 'name',
            width: 200,
            fixed: true
          }, {
            label: '性别',
            width: 300,
            prop: 'sex'
          }, {
            label: '日期',
            width: 300,
            prop: 'datetime'
          }, {
            label: '地址',
            width: 300,
            prop: 'address'
          }
        ]
      },
    };
  },
  methods: {
  }
}
</script>

显示代码复制代码复制代码

多级表头

暂无数据

只要在配置中添加children层级嵌套即可

<template>
  <avue-crud :option="option"
             :data="data"></avue-crud>
</template>
<script>
export default {
  data () {
    return {
      option: {
        excelBtn: true,
        border: true,
        index: true,
        expandLevel: 3,
        headerAlign: 'center',
        align: 'center',
        tree: true,
        labelWidth: 100,
        column: [{
          label: '姓名',
          prop: 'name',
          width: 140,
        }, {
          label: '性别1',
          prop: 'sex',
        },
        {
          label: '自定义图标',
          prop: 'icon',
          type: "icon",
          iconList: [{
            label: '基本图表',
            list: ['el-icon-time', 'el-icon-bell', 'el-icon-star-on']
          }]
        }, {
          label: '多级表头',
          children: [{
            label: '信息',
            children: [{
              label: '年龄',
              prop: 'age'
            }, {
              label: '手机号',
              prop: 'phone',
            }]
          }, {
            label: '地区',
            prop: 'address',
            type: 'select',
            props: {
              label: 'name',
              value: 'code'
            },
            dicUrl: 'https://cli.avuejs.com/api/area/getProvince'
          }]
        }, {
          label: '测试',
          prop: 'test',
        },
        {
          label: '手机信息1',
          prop: 'phone1'
        }],
      },
      data: [{
        name: '张三',
        age: 14,
        address: '110000',
        phone1: '17547400800',
        phone: '17547400800',
        icon: 'el-icon-time',
        test: 1,
        sex: '男'
      }, {
        name: '王五',
        age: 10,
        address: '120000',
        test: 1,
        sex: '女',
        icon: 'el-icon-star-on',
        phone1: '17547400800',
        phone: '17547400800'
      }]
    }
  }
}
</script>

显示代码复制代码复制代码

自定义列表头

暂无数据

在卡槽中指定列的prop加上-header作为卡槽的名称即可自定义

<template>
  <avue-crud ref="crud"
             :option="option"
             :data="data">
    <template #name-header="{column}">
      <el-tag>{{(column || {}).label}}-{{(column || {}).prop}}</el-tag>
    </template>
  </avue-crud>
</template>
<script>
export default {
  data () {
    return {
      option: {
        column: [{
          label: '姓名',
          prop: 'name',
        }, {
          label: '年龄',
          prop: 'sex'
        }]
      },
      data: [
        {
          name: '张三',
          sex: '男'
        }, {
          name: '李四',
          sex: '女'
        }
      ],
    }
  }
}
</script>

显示代码复制代码复制代码

自定义菜单栏左边

暂无数据

卡槽为menu-left为表格菜单左边的位置

<template>
  <avue-crud :data="data"
             :option="option">
    <template #menu-left="{size}">
      <el-button type="primary"
                 :size="size">自定义按钮</el-button>
    </template>
  </avue-crud>
</template>
<script>
export default {
  data () {
    return {
      data: [
        {
          name: '张三',
          sex: '男'
        }, {
          name: '李四',
          sex: '女'
        }
      ],
      option: {
        column: [
          {
            label: '姓名',
            prop: 'name'
          }, {
            label: '性别',
            prop: 'sex'
          }
        ]
      },
    };
  }
}
</script>

显示代码复制代码复制代码

自定义菜单栏右边

暂无数据

卡槽为menu-right为表格菜单右边的位置

<template>
  <avue-crud :data="data"
             :option="option">
    <template #menu-right="{size}">
      <el-button type="primary"
                 icon="el-icon-edit"
                 circle
                 :size="size"></el-button>
    </template>
  </avue-crud>
</template>
<script>
export default {
  data () {
    return {
      data: [
        {
          name: '张三',
          sex: '男'
        }, {
          name: '李四',
          sex: '女'
        }
      ],
      option: {
        column: [
          {
            label: '姓名',
            prop: 'name'
          }, {
            label: '性别',
            prop: 'sex'
          }
        ]
      },
    };
  }
}
</script>

显示代码复制代码复制代码