inputTabel表格选择器

... 2022-9-15 About 1 min

# inputTabel表格选择器

值:0
格式化值:0
值:[ 0, 1 ]
<el-row :span="24">
  <el-col :span="6">
   值:{{form}}<br/>
   <avue-input-table :props="props"  :children="children" :on-load="onLoad" v-model="form"  placeholder="请选择数据" ></avue-input-table>
   格式化值:{{form}}<br/>
   <avue-input-table :props="props" :children="children" :formatter="formatter" :on-load="onLoad" v-model="form"  placeholder="请选择数据" ></avue-input-table>
    值:{{form1}}<br/>
    <avue-input-table multiple :props="props" :children="children" :formatter="formatter1" :on-load="onLoad1" v-model="form1"  placeholder="请选择数据" ></avue-input-table>
  </el-col>
</el-row>
<script>
export default {
    data() {
      return {
        children:{
          border: true,
          column: [{
            label: '姓名',
            width: 120,
            search:true,
            prop: 'name'
          }, {
            label: '性别',
            search:true,
            prop: 'sex'
          }],
        },
        props: {
          label: 'name',
          value: 'id'
        },
        form:'0',
        form1:[0,1]
      }
    },
    methods:{
      formatter1(row){
       if (Array.isArray(row)) {
          return row.map(ele => ele.name + '格式化').join(',')
        } else {
          return row.name + '格式化'
        }
      },
      onLoad1({ 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: '女'
          }]
        })
      },
      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: '男'
          })
          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: '男'
          }, {
            id: '1',
            name: '李四',
            sex: '女'
          }]
        })
      }
    }
}
</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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
Expand Copy
Last update: December 15, 2023 12:01
Contributors: smallwei
您正在浏览基于 Vue 2.x 的 Avue 文档; 点击这里 查看 Vue 3.x 的升级版本