# Table表格选择器
# 基础用法
内部组件为crud组件,大部分属性参考Crud文档
<template>
<avue-form ref="form"
:option="option"></avue-form>
</template>
<script>
export default {
data () {
return {
option: {
column: [
{
label: '表格选择器',
prop: 'table',
type: 'table',
children: {
border: true,
column: [{
label: '姓名',
width: 120,
search: true,
searchSpan: 24,
prop: 'name'
}, {
label: '性别',
prop: 'sex'
}],
},
formatter: (row) => {
if (!row.name) return ''
return row.name + '-' + row.sex
},
onLoad: ({ page, value, data }, callback) => {
//首次加载去查询对应的值
if (value) {
this.$message.success('首次查询' + value)
callback({
id: '0',
name: '张三',
sex: '男',
age: 18
})
return
}
if (data) {
this.$message.success('搜索查询参数' + JSON.stringify(data))
}
if (page) {
this.$message.success('分页参数' + JSON.stringify(page))
}
//分页查询信息
callback({
total: 2,
data: [{
id: '0',
name: '张三',
sex: '男',
age: 18
}, {
id: '1',
name: '李四',
sex: '女',
age: 18
}]
})
},
props: {
label: 'name',
value: 'id'
}
}]
}
}
}
}
</script>
显示代码复制代码复制代码
# 默认值
value
属性可以提供一个初始化的默认值
<template>
<avue-form :option="option"></avue-form>
</template>
<script>
export default {
data () {
return {
option: {
column: [
{
label: '表格选择器',
prop: 'table',
type: 'table',
value: '0',
children: {
border: true,
column: [{
label: '姓名',
width: 120,
search: true,
searchSpan: 24,
prop: 'name'
}, {
label: '性别',
prop: 'sex'
}],
},
formatter: (row) => {
if (!row.name) return ''
return row.name + '-' + row.sex
},
onLoad: ({ page, value, data }, callback) => {
//首次加载去查询对应的值
if (value) {
this.$message.success('首次查询' + value)
callback({
id: '0',
name: '张三',
sex: '男',
age: 18
})
return
}
if (data) {
this.$message.success('搜索查询参数' + JSON.stringify(data))
}
if (page) {
this.$message.success('分页参数' + JSON.stringify(page))
}
//分页查询信息
callback({
total: 2,
data: [{
id: '0',
name: '张三',
sex: '男',
age: 18
}, {
id: '1',
name: '李四',
sex: '女',
age: 18
}]
})
},
props: {
label: 'name',
value: 'id'
}
}]
}
}
}
}
</script>
显示代码复制代码复制代码
# 禁用状态
通过disabled
属性指定是否禁用
<template>
<avue-form :option="option"></avue-form>
</template>
<script>
export default {
data () {
return {
option: {
column: [
{
label: '表格选择器',
prop: 'table',
type: 'table',
disabled: true
}
]
}
}
}
}
</script>
显示代码复制代码复制代码
# 与其它框交互
利用内置的getPropRef
方法可以获取内部值赋值给其它变量
<template>
<avue-form ref="form"
:option="option"
v-model="form"></avue-form>
</template>
<script>
export default {
data () {
return {
form: {},
option: {
column: [
{
label: '表格',
prop: 'table',
type: 'table',
children: {
border: true,
column: [{
label: '姓名',
width: 120,
search: true,
searchSpan: 24,
prop: 'name'
}, {
label: '性别',
prop: 'sex'
}],
},
formatter: (row) => {
if (!row.name) return ''
return row.name + '-' + row.sex
},
onLoad: ({ page, value, data }, callback) => {
//首次加载去查询对应的值
if (value) {
this.$message.success('首次查询' + value)
callback({
id: '0',
name: '张三',
sex: '男',
age: 18
})
return
}
if (data) {
this.$message.success('搜索查询参数' + JSON.stringify(data))
}
if (page) {
this.$message.success('分页参数' + JSON.stringify(page))
}
//分页查询信息
callback({
total: 2,
data: [{
id: '0',
name: '张三',
sex: '男',
age: 18
}, {
id: '1',
name: '李四',
sex: '女',
age: 18
}]
})
},
props: {
label: 'name',
value: 'id'
}
}, {
label: '性别',
prop: 'sex'
}, {
label: '年龄',
prop: 'age'
}]
}
}
},
watch: {
'form.table' () {
let table = this.$refs.form.getPropRef('table').$refs.temp
this.form.sex = table.active.sex;
this.form.age = table.active.age;
}
}
}
</script>
显示代码复制代码复制代码