表头配置

固定表头

效果预览可直接操作下方示例

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

正在加载示例…

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

<script setup>
import { ref } from 'vue';

const data = ref([
  { name: '张三', sex: '男' },
  { name: '李四', sex: '女' },
  { name: '张三', sex: '男' },
  { name: '李四', sex: '女' },
  { name: '张三', sex: '男' },
  { name: '李四', sex: '女' },
  { name: '张三', sex: '男' },
  { name: '李四', sex: '女' }
]);

const option = ref({
  height: 300,
  column: [
    { label: '姓名', prop: 'name', width: 200, fixed: true },
    { label: '性别', prop: 'sex', width: 300 },
    { label: '日期', prop: 'datetime', width: 300 },
    { label: '地址', prop: 'address', width: 300 }
  ]
});
</script>

隐藏表头

效果预览可直接操作下方示例

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

正在加载示例…

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

<script setup>
import { ref } from 'vue';

const data = ref([
  { name: '张三', sex: '男' },
  { name: '李四', sex: '女' }
]);

const option = ref({
  showHeader: false,
  column: [
    { label: '姓名', prop: 'name', width: 200, fixed: true },
    { label: '性别', prop: 'sex', width: 300 },
    { label: '日期', prop: 'datetime', width: 300 },
    { label: '地址', prop: 'address', width: 300 }
  ]
});
</script>

多级表头

效果预览可直接操作下方示例

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

正在加载示例…

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

<script setup>
import { ref } from 'vue';

const option = ref({
  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://api.avuejs.com/area/getProvince'
        }
      ]
    },
    { label: '测试', prop: 'test' },
    { label: '手机信息1', prop: 'phone1' }
  ]
});

const data = ref([
  {
    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>

提示

3.4.3+

自定义表头样式

.warning-row{
  background-color: #F56C6C !important;
  color:#fff;
}
.success-row{
  background-color: #67C23A !important;
  color:#fff;
}

效果预览可直接操作下方示例

可以通过指定 组件的 header-class-name

正在加载示例…

<template>
  <avue-crud :data="data"
             :option="option"
             :header-cell-class-name="headerCellClassName"
             :header-row-class-name="headerRowClassName"></avue-crud>
</template>

<script setup>
import { ref } from 'vue';

const data = ref([
  { name: '张三', sex: '男' },
  { name: '李四', sex: '女' }
]);

const option = ref({
  column: [
    { label: '姓名', prop: 'name' },
    { label: '性别', prop: 'sex' }
  ]
});

const headerRowClassName = ({ rowIndex }) => {
  console.log({ rowIndex });
};

const headerCellClassName = ({ column, columnIndex }) => {
  if (columnIndex === 0) {
    return 'warning-row';
  } else if (columnIndex === 1) {
    return 'success-row';
  }
};
</script>

提示

3.4.3+

表头单元格样式

效果预览可直接操作下方示例

对开开放了header-cell-style和header-row-style方法

正在加载示例…

<template>
  <avue-crud :data="data"
             :option="option"
             :header-row-style="headerRowStyle"
             :header-cell-style="headerCellStyle"></avue-crud>
</template>

<script setup>
import { ref } from 'vue';

const data = ref([
  { name: '张三', money: 3000 },
  { name: '李四', sex: false, money: 4000 },
  { name: '王五', sex: false, money: 2000 }
]);

const option = ref({
  column: [
    { label: '姓名', prop: 'name' },
    { label: '工资', prop: 'money' }
  ]
});

const headerRowStyle = ({ rowIndex }) => {
  console.log({ rowIndex });
};

const headerCellStyle = ({ column, columnIndex, row, rowIndex }) => {
  return columnIndex === 0
    ? { color: 'green', fontWeight: 'bold', fontSize: '20px' }
    : { color: 'red', fontWeight: 'bold', fontSize: '20px' };
};
</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 setup>
import { ref } from 'vue';

const option = ref({
  column: [
    { label: '姓名', prop: 'name' },
    { label: '年龄', prop: 'sex' }
  ]
});

const data = ref([
  { 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 setup>
import { ref } from 'vue';

const data = ref([
  { name: '张三', sex: '男' },
  { name: '李四', sex: '女' }
]);

const option = ref({
  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 setup>
import { ref } from 'vue';

const data = ref([
  { name: '张三', sex: '男' },
  { name: '李四', sex: '女' }
]);

const option = ref({
  column: [
    { label: '姓名', prop: 'name' },
    { label: '性别', prop: 'sex' }
  ]
});
</script>