Avue

表格列配置项

主键

暂无数据

很多表格操作都是依靠表格主键的(行展开，表格树等)，需要配置rowKey属性，默认为id

<template>
<avue-crud :data="data" :option="option" ></avue-crud>
</template>
<script>
export default {
    data() {
      return {
        data: [
          {
            ids:1,
            name:'张三',
            sex:'男'
          }, {
            ids:2,
            name:'李四',
            sex:'女'
          }
        ],
        option:{
          rowKey:'ids',
          column:[
             {
              label:'姓名',
              prop:'name'
            }, {
              label:'性别',
              prop:'sex'
            }
          ]
        },
      };
    }
}
</script>
显示代码

宽度

暂无数据

可以配置width属性控制每列的宽度，如果不配置则会自适应

<template>
<avue-crud :data="data" :option="option" ></avue-crud>
</template>
<script>
export default {
    data() {
      return {
        data: [
          {
            id:1,
            name:'张三',
            sex:'男'
          }, {
            id:2,
            name:'李四',
            sex:'女'
          }
        ],
        option:{
          column:[
             {
              width:200,
              label:'姓名',
              prop:'name'
            }, {
              label:'性别',
              prop:'sex'
            }
          ]
        },
      };
    }
}
</script>
显示代码

索引

暂无数据

设index属性为true即可，indexLabel设置表格的序号的标题,默认为#

<template>
<avue-crud :data="data" :option="option" ></avue-crud>
</template>
<script>
export default {
    data() {
      return {
        data: [
          {
            name:'张三',
            sex:'男'
          }, {
            name:'李四',
            sex:'女'
          }
        ],
        option:{
          index:true,
          indexLabel:'序号',
          column:[
             {
              label:'姓名',
              prop:'name'
            }, {
              label:'性别',
              prop:'sex'
            }
          ]
        },
      };
    }
}
</script>
显示代码

自定义索引

暂无数据

<template>
<avue-crud :data="data" :option="option" >
  <template #index="{row,index}">
    <el-tag>{{index+1}}</el-tag>
  </template>
</avue-crud>
</template>
<script>
export default {
    data() {
      return {
        data: [
          {
            name:'张三',
            sex:'男'
          }, {
            name:'李四',
            sex:'女'
          }
        ],
        option:{
          column:[{
              label:'序号',
              prop:'index',
              fixed:true
            },
             {
              label:'姓名',
              prop:'name'
            }, {
              label:'性别',
              prop:'sex'
            }
          ]
        },
      };
    }
}
</script>
显示代码

内容超出隐藏

暂无数据

overHidden设置true即可超出列表宽度的内容以省略号显示

<template>
  <avue-crud :data="data"
             :option="option"></avue-crud>
</template>
<script>
export default {
  data () {
    return {
      data: [
        {
          name: '张三的名字是一个很长很长的内容',
          sex: '男'
        }, {
          name: '李四',
          sex: '女'
        }
      ],
      option: {
        column: [
          {
            label: '姓名',
            prop: 'name',
            overHidden: true,
            width: 80,
          }, {
            label: '性别',
            prop: 'sex'
          }
        ]
      },
    };
  }
}
</script>
显示代码

内容格式化

暂无数据

formatter方法格式化内容

<template>
<avue-crud :data="data" :option="option"></avue-crud>
</template>
<script>
export default {
    data() {
      return {
        data: [
          {
            name:'张三',
            sex:'男',
            select:'110000'
          }, {
            name:'李四',
            sex:'女',
            select:'120000'
          }
        ],
        option:{
          column:[
             {
              label:'姓名',
              prop:'name',
              formatter:(val,value,label)=>{
                return val.name+'格式化内容'
              }
            }, {
              label:'性别',
              prop:'sex'
            },{
              label: '字典',
              prop: 'select',
              type: 'select',
              formatter:(val,value,label)=>{
                return `${label}(${value})`
              },
              props: {
                label: 'name',
                value: 'code'
              },
              dicUrl: 'https://cli.avuejs.com/api/area/getProvince'
            }]
        },
      };
    }
}
</script>
显示代码

支持 html 转译

暂无数据

配置html设置为true即可支持formatter转义html代码

<template>
<avue-crud :data="data" :option="option"></avue-crud>
</template>
<script>
export default {
    data() {
      return {
        data: [
          {
            name:'张三',
            sex:'男'
          }, {
            name:'李四',
            sex:'女'
          }
        ],
        option:{
          column:[
             {
              label:'姓名',
              prop:'name',
              html:true,
              formatter:(val)=>{
                return '<b style="color:red">'+val.name+'格式化内容</b>'
              }
            }, {
              label:'性别',
              prop:'sex'
            }
          ]
        },
      };
    }
}
</script>
显示代码

列隐藏

暂无数据

一共是有 4 列的hide和showColumn可以达到控制列显隐控制

<template>
<avue-crud :option="option" :data="data" ></avue-crud>
</template>
<script>
export default {
  data(){
    return {
       data:[{
          text1:'内容1-1',
          text2:'内容1-2',
          text3:'内容1-3',
          text4:'内容1-4'
       },{
          text1:'内容2-1',
          text2:'内容2-2',
          text3:'内容2-3',
          text4:'内容2-4'
       }],
       option:{
          align:'center',
          headerAlign:'center',
          column: [{
            label: '列内容1',
            prop: 'text1',
          }, {
            label: '列内容2',
            prop: 'text2',
          }, {
            label: '列内容3',
            prop: 'text3',
            hide:true
          }, {
            label: '列内容4',
            prop: 'text4',
            showColumn:false,
          }]
       }
    }
  }
}
</script>
显示代码

持久化存储

TIP

如果有远程字典类的配置或者加载错误情况，需要初始化下组件CRUD 初始化

暂无数据

<template>
  <avue-crud ref="crud"
             :key="reload"
             :option="option"
             :data="data">
    <template #menu-left="{size}">
      <el-button @click="saveOption"
                 type="danger"
                 :size="size">保存配置</el-button>
    </template>
  </avue-crud>
</template>
<script>
const key = 'avue-option'
export default {
  data () {
    return {
      reload: Math.random(),
      data: [{
        text1: '内容1-1',
        text2: '内容2-1',
        text3: '110000'
      }, {
        text1: '内容1-2',
        text2: '内容2-2',
        text3: '120000'
      }, {
        text1: '内容1-3',
        text2: '内容2-3'
      }, {
        text1: '内容1-4',
        text2: '内容2-4'
      }, {
        text1: '内容1-5',
        text2: '内容2-5'
      }],
      option: {
        sortable: true,
        addBtn: false,
        menu: false,
        border: true,
        align: 'center',
        column: [{
          label: '列内容1',
          prop: 'text1'
        }, {
          label: '列内容2',
          prop: 'text2'
        }, {
          label: '列内容3',
          prop: 'text3',
          type: 'select',
          props: {
            label: 'name',
            value: 'code'
          },
          dicUrl: 'https://cli.avuejs.com/api/area/getProvince',
        }]
      }
    }
  },
  mounted () {
    let option = localStorage.getItem(key)
    if (option) {
      this.option = JSON.parse(option)
      this.reload = Math.random()
    }
  },
  methods: {
    saveOption () {
      localStorage.setItem(key, JSON.stringify(this.option))
      this.$message.success('配置保存成功')
    }
  }
}
</script>
显示代码

筛选

暂无数据

设置filters为true，字典用法和普通用法一致,filterMethod为自定义的筛选逻辑，filter-multiple筛选的数据为多选还是单选，默认为 true

<template>
<avue-crud :data="data" :option="option"></avue-crud>
</template>
<script>
export default {
 data() {
      return {
        data: [
          {
            name:'张三',
            sex:'男'
          }, {
            name:'李四',
            sex:'女'
          }
        ],
        option:{
          column:[
             {
              label:'姓名',
              prop:'name',
              formatter:function(row, value , label, column){
                  return row.name +'自定义'
              }
            }, {
              label:'性别',
              prop:'sex',
              filters:true,
              dicData:[{ label: '男', value: '男' }, { label: '女', value: '女' }],
              filterMethod:function(value, row, column) {
                return row.sex === value;
              }
            }
          ]
        }
      }
    }
  }
</script>
显示代码

默认排序

暂无数据

设置defaultSort一个属性接受prop排序的字段和order排序的方式俩个属性，初始化的时候根据设置默认排序,order中接受 ascending 表示升序，descending 表示降序，回调sort-change方法返回排序参数

<template>
<avue-crud :data="data" :option="option1" @sort-change="sortChange"></avue-crud>
</template>
<script>
export default {
    data() {
      return {
        data: [
          {
            name:'张三',
            sex:'男'
          }, {
            name:'李四',
            sex:'女'
          }
        ],
        option1:{
          defaultSort:{
            prop: 'name',
            order: 'descending'
          },
          border:true,
          column:[
             {
              sortable:true,
              label:'姓名',
              prop:'name'
            }, {
              label:'性别',
              prop:'sex'
            }
          ]
        }
      };
    },
    methods: {
       sortChange(val){
        this.$message.success(JSON.stringify(val));
      }
    }
}
</script>
显示代码

冻结列

TIP

配置fixed为true即可实现冻结列

暂无数据

配置indexFixed,selectionFixed,expandFixed可以配置序号，多选，面板是否为冻结,当然你也可以配置他们的宽度indexWdth,selectionWidth,expandWidth。

<template>
  <avue-crud :data="data"
             :option="option"></avue-crud>
</template>
<script>
export default {
  data () {
    return {
      data: [
        {
          id: 1,
          name: '张三',
          sex: '男'
        }, {
          id: 2,
          name: '李四',
          sex: '女'
        }
      ],
      option: {
        index: true,
        indexFixed: false,
        indexWidth: 100,
        selection: true,
        selectionWidth: 100,
        selectionFixed: false,
        expand: true,
        expandWidth: 100,
        expandFixed: false,
        column: [
          {
            label: '姓名',
            fixed: true,
            prop: 'name'
          }, {
            width: 500,
            label: '性别',
            prop: 'sex'
          }
        ]
      },
    };
  }
}
</script>
显示代码

单元格和表头样式

TIP

配置className和labelClassName配置单元格和表头样式名称

暂无数据

配置indexClassName,selectionClassName,expandClassName可以配置序号，多选，面板列单元格的样式名称,配置indexLabelClassName,selectionLabelClassName,expandLabelClassName表头样式名称

<template>
  <avue-crud :data="data"
             :option="option"></avue-crud>
</template>
<script>
export default {
  data () {
    return {
      data: [
        {
          id: 1,
          name: '张三',
          sex: '男'
        }, {
          id: 2,
          name: '李四',
          sex: '女'
        }
      ],
      option: {
        index: true,
        indexClassName: 'indexClassName',
        indexLabelClassName: 'indexLabelClassName',
        selection: true,
        selectionClassName: 'selectionClassName',
        selectionLabelClassName: 'selectionLabelClassName',
        expand: true,
        expandClassName: 'expandClassName',
        expandLabelClassName: 'expandLabelClassName',
        column: [
          {
            label: '姓名',
            prop: 'name',
            className:'className',
            labelClassName:'labelClassName'
          }, {
            width: 500,
            label: '性别',
            prop: 'sex'
          }
        ]
      },
    };
  }
}
</script>
显示代码

列拖拽排序

<!-- 导入需要的包 （一定要放到index.html中的head标签里） -->
<script src="https://cdn.staticfile.net/Sortable/1.10.0-rc2/Sortable.min.js"></script>

暂无数据

columnSort设置为true即可开启拖拽功能，没有回调用方法直接修改option中的顺序

<template>
<avue-crud :option="option" :data="data"></avue-crud>
</template>
<script>
export default {
  data(){
    return {
       data:[{
          text1:'内容1-1',
          text2:'内容1-2'
       },{
          text1:'内容2-1',
          text2:'内容2-2'
       },{
          text1:'内容3-1',
          text2:'内容3-2'
       }],
       option:{
          columnSort:true,
          column: [{
            label: '列内容1',
            prop: 'text1',
          }, {
            label: '列内容2',
            prop: 'text2',
          }]
       }
    }
  }
}
</script>
显示代码

自定义列

暂无数据

设置列的属性slot为true时，在卡槽中用prop作为卡槽的名字即可

<template>
  <avue-crud :data="data"
             :option="option">
    <template #name="scope">
      <el-tag>{{scope}}</el-tag>
    </template>
  </avue-crud>
</template>
<script>
export default {
  data () {
    return {
      data: [
        {
          name: '张三',
          sex: '男'
        }, {
          name: '李四',
          sex: '女'
        }
      ],
      option: {
        column: [
          {
            label: '姓名',
            prop: 'name'
          },
          {
            label: '性别',
            prop: 'sex'
          }
        ]
      },
    };
  },
}
</script>
显示代码

render 渲染

TIP

3.4.2+

暂无数据

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

import { h } from 'vue'
export default {
  data () {
    return {
      data: [
        {
          name: '张三',
          sex: '男'
        }, {
          name: '李四',
          sex: '女'
        }
      ],
      option: {
        column: [
          {
            label: '姓名',
            prop: 'name',
            render: ({ row }) => {
              return h('p',
                {
                  attrs: { id: 'box' },
                  class: { 'demo': true },
                  style: { color: 'pink', lineHeight: '30px' },
                }, row.name + 'Hello World Avue')
            }
          },
          {
            label: '性别',
            prop: 'sex'
          }
        ]
      },
    };
  },
}
</script>
显示代码

列合并

TIP

如果数据不确定参考动态数据行和列合并

暂无数据

通过给传入spanMethod方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象

<template>
<avue-crud
  :data="data"
  :option="option"
  :span-method="spanMethod"
></avue-crud>
</template>
<script>
  export default {
    data() {
      return {
        data: [
          {
            id: '12987122',
            name: '王小虎',
            amount1: '234',
            amount2: '3.2',
            amount3: 10
          },
          {
            id: '12987123',
            name: '王小虎',
            amount1: '165',
            amount2: '4.43',
            amount3: 12
          },
          {
            id: '12987124',
            name: '王小虎',
            amount1: '324',
            amount2: '1.9',
            amount3: 9
          },
          {
            id: '12987125',
            name: '王小虎',
            amount1: '621',
            amount2: '2.2',
            amount3: 17
          },
          {
            id: '12987126',
            name: '王小虎',
            amount1: '539',
            amount2: '4.1',
            amount3: 15
          }
        ],
        option: {
          border: true,
          menu:false,
          column: [
            {
              label: 'ID',
              prop: 'id'
            },
            {
              label: '姓名',
              prop: 'name'
            },
            {
              label: '数值 1',
              prop: 'amount1'
            },
            {
              label: '数值 2',
              prop: 'amount2'
            },
            {
              label: '数值 3',
              prop: 'amount3'
            }
          ]
        }
      }
    },
    methods: {
      spanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
          if (rowIndex % 2 === 0) {
            return {
              rowspan: 2,
              colspan: 1
            }
          } else {
            return {
              rowspan: 0,
              colspan: 0
            }
          }
        }
      }
    }
  }
</script>
显示代码
Last Updated:
Contributors: smallwei
您正在浏览基于Avue 3.x文档; 点击这里 查看Avue 2.x 的文档