# 表格高级用法
# 表格初始化
<template>
<el-button type="primary"
@click="handleReload">Key初始化</el-button>
<el-button type="primary"
@click="handleReload1">内置方法初始化</el-button>
<br /><br />
<avue-crud :key="reload"
ref="crud"
:data="data"
:option="option"></avue-crud>
</template>
<script>
export default {
data () {
return {
reload: Math.random(),
data: [
{
username: 'smallwei',
password: 'smallwei'
}, {
username: 'avue',
password: 'avue'
}
],
option: {
column: [
{
label: '用户名',
prop: 'username'
}, {
label: '密码',
prop: 'password',
type: 'password'
}
]
},
}
},
methods: {
handleReload () {
this.reload = Math.random();
this.$message.success('初始化完成')
},
handleReload1 () {
this.$refs.crud.refreshTable()
this.$message.success('初始化完成')
}
}
}
</script>
显示代码复制代码复制代码
# 配置项服务端加载
TIP
- 这里没有走真真的服务器请求,而是做了一个模拟
<template>
<el-button type="primary"
icon="el-icon-sort"
@click="getOption">服务端加载</el-button>
<br /> <br />
<avue-crud :key="reload"
:data="data"
:option="option"
:table-loading="loading"></avue-crud>
</template>
<script>
export default {
data () {
return {
reload: Math.random(),
loading: true,
data: [],
option: {},
};
},
methods: {
getOption () {
this.$message.success('模拟2s后服务端动态加载');
setTimeout(() => {
this.option = {
border: true,
align: 'center',
menuAlign: 'center',
column: [
{
label: '姓名',
prop: 'name'
}, {
label: '性别',
prop: 'sex'
}, {
label: '省份',
prop: 'province',
type: 'select',
props: {
label: 'name',
value: 'code'
},
dicUrl: `https://cli.avuejs.com/api/area/getProvince`,
rules: [
{
required: true,
message: '请选择省份',
trigger: 'blur'
}
]
}]
}
this.data = [
{
name: '张三',
sex: '男',
province: '110000'
}, {
name: '李四',
sex: '女',
province: '120000'
}
]
this.loading = false;
this.reload = Math.random()
}, 2000)
}
}
}
</script>
```
:::
显示代码复制代码复制代码
# 配置项切换
<template>
<avue-crud ref="crud"
:data="data"
:option="option">
<template #menu-left="{}">
<el-button type="primary"
@click="handleSwitch"
icon="el-icon-sort">切 换</el-button>
</template>
</avue-crud>
</template>
<script>
export default {
data () {
return {
type: true,
data: [
{
name: '张三',
sex: '男',
username: 'smallwei',
password: 'smallwei'
}, {
name: '李四',
sex: '女',
username: 'avue',
password: 'avue'
}
],
option: {},
option1: {
addBtn: false,
column: [
{
label: '姓名',
prop: 'name',
search: true
}
]
},
option2: {
addBtn: false,
column: [
{
label: '用户名',
prop: 'username',
search: true
}, {
label: '密码',
prop: 'password',
type: 'password',
search: true
}, {
label: '姓名',
prop: 'name',
search: true
}
]
},
};
},
mounted () {
this.handleSwitch();
},
methods: {
handleSwitch () {
this.type = !this.type;
if (this.type) {
this.option = this.option1;
} else {
this.option = this.option2;
}
this.$refs.crud.refreshTable()
}
}
}
</script>
显示代码复制代码复制代码
# 动态改变结构
<template>
<avue-crud v-model:defaults="defaults"
:option="option"
:data="data">
<template #menu-left>
<el-button type="primary"
@click="handleChange">点击改变</el-button>
</template>
</avue-crud>
</template>
<script>
export default {
data () {
return {
addBtn: false,
flag: true,
defaults: {},
data: [{
text1: 0,
}],
option: {
column: [{
label: '内容2',
prop: 'text2',
display: true
}, {
label: '内容3',
prop: 'text3'
}]
}
}
},
methods: {
handleChange () {
this.flag = !this.flag;
if (this.flag) {
this.defaults.text2.display = true
this.defaults.text3.label = '内容3'
} else {
this.defaults.text2.display = false
this.defaults.text3.label = '有没有发现我变了'
}
}
}
}
</script>
显示代码复制代码复制代码