avue框架中表格的使用

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 9 天，点击查看活动详情

目前公司的项目后台管理使用了Avue搭建表格，这个框架通过配置可以生成带搜索功能的表格。下面记录了常用功能。

这个是Avue的官网，文档还是很详细的，表格相关在crud里。 avuejs.com/

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

这个是最简单的用法，具体配置通过option配置。data表示表格绑定的数据，form 表示表单绑定的数据，因为Avue可以将列表数据自动生成详情表单页。

<avue-crud :data="data" :option="option" :page.sync="page"></avue-crud>

<script>
  export default {
    data() {
      return {
        page: {
          pageSize: 20,
          pagerCount:5
        },
        data: [],
        option: {
          align: 'center',
          menuAlign: 'center',
          column: [
            {
              label: '姓名',
              prop: 'name'
            },
            {
              label: '性别',
              prop: 'sex'
            }
          ]
        }
      }
    },

page表示为表格添加了分页功能，具体的分页配置，通过在data函数的page对象中设置。如每页展示条数等。

Avue一般由搜索栏，菜单栏，表格，分页器组成。 searchShow: true,开启搜索功能，设置了搜索功能后会被展示到搜索栏， 搜索栏中的搜索和清空按钮通常单独一行显示，想让他们不单独一行显示可以通过设置 searchMenuSpan:8, 数字随意填写。

默认右侧菜单栏有三个按钮，通过设置option中的refreshBtn:false, searchShowBtn:false, columnBtn:false,可以实现隐藏效果。

菜单栏没有内容时也会占用高度::v-deep .avue-crud__menu { display: none; }可以去掉这个高度。

表格中的内容通常靠左显示，通过align: 'center'可以让文字居中显示，表格最右一列通常为表格操作栏，里面包含了查看，编辑，删除等功能。不想展示操作栏时menu:false,可以隐藏操作栏。

option中的column数组是各列的数据展示配置项，

{
label: "项目名称",
prop: "entryName", 
search: true, 
width:150,//列宽 
 display: false//弹窗表单里不显示 
 rules: [{//弹窗表单里是否必填 
 required: true,//是否显示星号
 message: "请输入开始时间", 
 trigger: "blur" }] },

上述是常用的列表配置，width表示该列的宽度，search控制该列是否可以被搜索，为真时会显示到搜索栏。 rules控制的是表单验证，单纯的列表页不需要设置，是表单页里显示的。 avue还可以实现列内容格式化，自定义搜索栏，自定义菜单栏，自定义操作栏等，内容高度自由。 上面暂时介绍一些常用设置。