Avue

Table表格选择器

... 2021-7-29 About 3 min

# Table表格选择器

# 基础用法

内部组件为crud组件，大部分属性参考Crud文档

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

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
Expand Copy

# 默认值

value属性可以提供一个初始化的默认值

<avue-form :option="option"></avue-form>

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
Expand Copy

# 禁用状态

通过disabled属性指定是否禁用

<avue-form :option="option"></avue-form>

<script>
export default{
  data() {
    return {
      option: {
        column: [
         {
            label:'表格选择器',
            prop:'table',
            type:'table',
            disabled:true
         }
        ]
      }
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Expand Copy

# 多选

设置multiple属性即可启用多选

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

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
Expand Copy

# 与其它框交互

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

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

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
Expand Copy
Last update: April 19, 2024 11:23
Contributors: smallwei

Map坐标选择器

您正在浏览基于 Vue 2.x 的 Avue 文档; 点击这里 查看 Vue 3.x 的升级版本