表格选择器

TIP

2.6.0+

内部组件为crud组件，大部分属性还是支持的

普通用法

利用内置的getPropRef方法可以获取内部值赋值给其它变量

<avue-form ref="form" :option="option" v-model="form" ></avue-form>

<script>
export default{
  data() {
    return {
      form: { 
        table:'0'
      },
      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>

Expand Copy Copy