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: '女',
                  disabled: true,
                  age: 18
                }, {
                  id: '2',
                  name: '王五',
                  sex: '女'
                }]
              })
            },
            props: {
              disabled: 'disabled',
              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>
显示代码

多选

设置multiple属性即可启用多选

<template>
  <avue-form :option="option"
             v-model="form"></avue-form>
</template>
<script>
export default {
  data () {
    return {
      form: {
        table: [0, 2]
      },
      option: {
        column: [
          {
            label: '表格选择器',
            prop: 'table',
            type: 'table',
            multiple: true,
            children: {
              border: true,
              column: [{
                label: '姓名',
                width: 120,
                search: true,
                searchSpan: 24,
                prop: 'name'
              }, {
                label: '性别',
                prop: 'sex'
              }],
            },
            formatter: (row) => {
              if (Array.isArray(row)) {
                return row.map(ele => ele.name + '格式化').join(',')
              } else {
                return row.name + '格式化'
              }
            },
            onLoad: ({ page, value, data }, callback) => {
              //首次加载去查询对应的值
              if (value) {
                this.$message.success('首次查询' + value)
                callback([{
                  id: '0',
                  name: '张三',
                  sex: '男',
                  age: 18
                }, {
                  id: '2',
                  name: '王五',
                  sex: '女'
                }])
                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: '女',
                  disabled: true,
                  age: 18
                }, {
                  id: '2',
                  name: '王五',
                  sex: '女'
                }]
              })
            },
            props: {
              disabled: 'disabled',
              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
      let active = table.active;
      if (Array.isArray(active)) active = active[0]
      this.form.sex = active.sex;
      this.form.age = active.age;
    }
  }
}
</script>
显示代码
Last Updated:
Contributors: smallwei
您正在浏览基于Avue 3.x文档; 点击这里 查看Avue 2.x 的文档