# 表格列配置项

# 主键

很多表格操作都是依靠表格主键的(行展开,表格树等),需要配置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

# 索引

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

# 自定义索引

<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

# 内容超出隐藏

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

# 内容格式化

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

# 支持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

# 列隐藏

TIP

2.5.0+

一共是有4列的hideshowColumn可以达到控制列显隐控制

<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

# 改变结构配置

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

# 持久化存储

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

# 筛选

设置filterstrue,字典用法和普通用法一致,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

# 默认排序

设置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

# 冻结列

TIP

2.0.4+

TIP

配置fixedtrue即可实现冻结列

配置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

# 列拖拽排序

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

# 自定义列

设置列的属性slottrue时,在卡槽中用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

# 列合并

TIP

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

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

<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
Last Updated: 3/28/2022, 9:38:12 AM