# 表格列配置项
# 主键
很多表格操作都是依靠表格主键的(行展开，表格树等)，需要配置rowKey属性，默认为id
<avue-crud :data="data" :option="option" ></avue-crud>
<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>
Expand Copy Copy
# 索引
设index属性为true即可，indexLabel设置表格的序号的标题,默认为#
<avue-crud :data="data" :option="option" ></avue-crud>
<script>
export default {
data() {
return {
data: [
{
name:'张三',
sex:'男'
}, {
name:'李四',
sex:'女'
}
],
option:{
index:true,
indexLabel:'序号',
column:[
{
label:'姓名',
prop:'name'
}, {
label:'性别',
prop:'sex'
}
]
},
};
}
}
</script>
Expand Copy Copy
# 自定义索引
<avue-crud :data="data" :option="option" >
<template slot="index" slot-scope="{row,index}">
<el-tag>{{index+1}}</el-tag>
</template>
</avue-crud>
<script>
export default {
data() {
return {
data: [
{
name:'张三',
sex:'男'
}, {
name:'李四',
sex:'女'
}
],
option:{
column:[{
label:'序号',
prop:'index',
fixed:true
},
{
label:'姓名',
prop:'name'
}, {
label:'性别',
prop:'sex'
}
]
},
};
}
}
</script>
Expand Copy Copy
# 内容超出隐藏
overHidden设置true即可超出列表宽度的内容以省略号显示
<avue-crud :data="data" :option="option"></avue-crud><script>
export default {
data() {
return {
data: [
{
name:'张三的名字是一个很长很长的内容',
sex:'男'
}, {
name:'李四',
sex:'女'
}
],
option:{
column:[
{
label:'姓名',
prop:'name',
overHidden:true,
width:80,
}, {
label:'性别',
prop:'sex'
}
]
},
};
}
}
</script>
Expand Copy Copy
# 内容格式化
formatter方法格式化内容
<avue-crud :data="data" :option="option"></avue-crud><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>
Expand Copy Copy
# 支持html转译
TIP
2.8.23+
配置html设置为true即可支持formatter转义html代码
<avue-crud :data="data" :option="option"></avue-crud><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>
Expand Copy Copy
# 列隐藏
TIP
2.5.0+
一共是有4列的hide和showColumn可以达到控制列显隐控制
<avue-crud :option="option" :data="data" ></avue-crud>
<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>
Expand Copy Copy
# 改变结构配置
TIP
2.8.12+
<avue-crud ref="crud" :defaults.sync="defaults" :option="option" :data="data">
<template slot="menuLeft" slot-scope="{size}">
<el-button type="primary" :size="size" @click="change">改变配置</el-button>
</template>
</avue-crud>
<script>
export default {
data(){
return {
type:false,
defaults:{},
data:[{
text1:0
}],
option:{
column: [{
label: '内容1',
prop: 'text1',
type:'radio',
dicData:[{
label:'显示',
value:0
},{
label:'隐藏',
value:1,
}]
},{
label: '内容2',
prop: 'text2',
display:true
},{
label: '内容3',
prop: 'text3'
}]
}
}
},
methods:{
change(){
if(this.type){
this.defaults.text2.hide=true
this.defaults.text3.label='内容3'
}else{
this.defaults.text2.hide=false
this.defaults.text3.label='有没有发现我变了'
}
this.type=!this.type
this.$refs.crud.refreshTable()
}
}
}
</script>
Expand Copy Copy
# 持久化存储
TIP
2.9.0+
<avue-crud ref="crud" :option="option" :data="data">
<template slot="menuLeft" slot-scope="{size}">
<el-button @click="saveOption" type="danger" :size="size">保存配置</el-button>
</template>
</avue-crud>
<script>
let key1 = 'avue-column';
let key2 = 'avue-row';
export default {
data(){
return {
data:[{
text1:'内容1-1',
text2:'内容2-1'
},{
text1:'内容1-2',
text2:'内容2-2',
},{
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'
}]
}
}
},
mounted(){
let result1=localStorage.getItem(key1)
let result2=localStorage.getItem(key2)
if(result1) this.option = JSON.parse(result1)
if(result2) this.data = JSON.parse(result2)
},
methods:{
saveOption(){
localStorage.setItem(key1,JSON.stringify(this.option))
localStorage.setItem(key2,JSON.stringify(this.data))
this.$message.success('配置保存成功')
}
}
}
</script>
Expand Copy Copy
# 筛选
设置filters为true，字典用法和普通用法一致,filterMethod为自定义的筛选逻辑，filter-multiple筛选的数据为多选还是单选，默认为 true
<avue-crud :data="data" :option="option"></avue-crud>
<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>
Expand Copy Copy
# 默认排序
设置defaultSort一个属性接受prop排序的字段和order排序的方式俩个属性，初始化的时候根据设置默认排序,order中接受 ascending 表示升序，descending 表示降序，回调sort-change方法返回排序参数
<avue-crud :data="data" :option="option1" @sort-change="sortChange"></avue-crud>
<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>
Expand Copy Copy
# 冻结列
TIP
2.0.4+
TIP
配置fixed为true即可实现冻结列
配置indexFixed,selectionFixed,expandFixed可以配置序号，多选，面板是否为冻结,当然你也可以配置他们的宽度indexWdth,selectionWidth,expandWidth。
<avue-crud :data="data" :option="option" ></avue-crud>
<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,
align:'center',
menuFixed:false,
menuAlign:'center',
column:[
{
label:'姓名',
fixed:true,
prop:'name'
}, {
width:500,
label:'性别',
prop:'sex'
}
]
},
};
}
}
</script>
Expand Copy Copy
# 列拖拽排序
TIP
2.9.0+
<!-- 导入需要的包 （一定要放到index.html中的head标签里） -->
<script src="https://cdn.staticfile.org/Sortable/1.10.0-rc2/Sortable.min.js"></script>
columnSort设置为true即可开启拖拽功能，没有回调用方法直接修改option中的顺序
<avue-crud :option="option" :data="data"></avue-crud>
<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>
Expand Copy Copy
# 自定义列
设置列的属性slot为true时，在卡槽中用prop作为卡槽的名字即可
<avue-crud :data="data" :option="option" >
<template slot="name" slot-scope="scope" >
<el-tag>{{scope}}</el-tag>
</template>
</avue-crud>
<script>
export default {
data() {
return {
data: [
{
name:'张三',
sex:'男'
}, {
name:'李四',
sex:'女'
}
],
option:{
column:[
{
label:'姓名',
prop:'name',
slot:true
},
{
label:'性别',
prop:'sex'
}
]
},
};
},
}
</script>
Expand Copy Copy
# 列合并
TIP
如果数据不确定参考动态数据行和列合并
通过给传入spanMethod方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。
<avue-crud
:data="data"
:option="option"
:span-method="spanMethod"
></avue-crud>
<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>
Expand Copy Copy