MES7.0 开发文档
2025-02-08
目录

AppList

# 一、简介

AppList 是封装的列表组件。

# 二、效果

http://210.12.53.106:8888/outer/test/AppList (opens new window)

# 三、代码示例

# 官方 renderItem 插槽

使用官方 renderItem 插槽实现，没有关注列、选择列、编号列，不支持配置操作列。

<template>
  <app-list :listOption="listOption">
    <template slot="renderItem" slot-scope="item">
      <div>{{ item }}</div>
    </template>
  </app-list>
</template>


<script>
export default {
  data () {
    return {
      listOption: {
        autoRetrieve: false,
        isPage: false
      },
    }
  },
  created () {
    const list = []
    list.push({ title: '标题1', name: '姓名1', age: '年龄1' })
    list.push({ title: '标题2', name: '姓名2', age: '年龄2' })
    list.push({ title: '标题3', name: '姓名3', age: '年龄3' })
    list.push({ title: '标题4', name: '姓名4', age: '年龄4' })
    list.push({ title: '标题5', name: '姓名5', age: '年龄5' })
    this.listOption.initListData = list
  },
}
</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

# 内置 listRow 插槽（推荐）

使用底层 listRow 插槽实现，有关注列、选择列、编号列，支持配置操作列。

<template>
  <app-list :listOption="listOption">
    <template #listRow="{ row }">
      <div>{{ row }}</div>
	</template>
  </app-list>
</template>

<script>
export default {
  data () {
    return {
      listOption: {
        autoRetrieve: false,
        isPage: true
      }
    }
  },
  created () {
    const list = []
    list.push({ title: '标题1', name: '姓名1', age: '年龄1' })
    list.push({ title: '标题2', name: '姓名2', age: '年龄2' })
    list.push({ title: '标题3', name: '姓名3', age: '年龄3' })
    list.push({ title: '标题4', name: '姓名4', age: '年龄4' })
    list.push({ title: '标题5', name: '姓名5', age: '年龄5' })
    this.listOption.initListData = list
  }
}
</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

# 其它插槽

<template>
  <app-list :listOption="listOption">
  	<template slot="listTop">
      <div>listTop 插槽</div>
    </template>
    <template slot="listCenter">
      <div>listCenter 插槽</div>
    </template>
    <template slot="listTbarLeft">
      <div>listTbarLeft 插槽</div>
    </template>
    <template #listRow="{ row }">
      <div>{{ row }}</div>
    </template>
    <template slot="header">
      <div>list 头部</div>
    </template>
    <template slot="footer">
      <div>list 尾部</div>
    </template>
  </app-list>
</template>

<script>
export default {
  data () {
    return {
      listOption: {
        autoRetrieve: false
      }
    }
  },
  created () {
    const list = []
    list.push({ title: '标题1', name: '姓名1', age: '年龄1' })
    list.push({ title: '标题2', name: '姓名2', age: '年龄2' })
    list.push({ title: '标题3', name: '姓名3', age: '年龄3' })
    list.push({ title: '标题4', name: '姓名4', age: '年龄4' })
    list.push({ title: '标题5', name: '姓名5', age: '年龄5' })
    this.listOption.initListData = list
  }
}
</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

# 自定义组件

<template>
  <app-list :listOption="listOption" />
</template>

<script>
export default {
  data () {
    return {
      listOption: {
        component: () => import('@/components/Application/common/List/item/DescriptionsItem.vue'),
        autoRetrieve: false,
        // itemStyle: { padding: '8px' },
        columns: [
          {
            title: 'title',
            dataIndex: 'title'
          },
          {
            title: 'name',
            dataIndex: 'name'
          },
          {
            title: 'age',
            dataIndex: 'age'
          }
        ]
      }
    }
  },
  created () {
    const list = []
    list.push({ title: '标题1', name: '姓名1', age: '年龄1' })
    list.push({ title: '标题2', name: '姓名2', age: '年龄2' })
    list.push({ title: '标题3', name: '姓名3', age: '年龄3' })
    list.push({ title: '标题4', name: '姓名4', age: '年龄4' })
    list.push({ title: '标题5', name: '姓名5', age: '年龄5' })
    this.listOption.initListData = list
  }
}
</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

# 全选/全不选

<template>
  <app-list :listOption="listOption" />
</template>

<script>
export default {
  data () {
    return {
      listOption: {
        isEditList: true,
        component: 'form',
        isCheckBoxModel: true,
        rowNumber: true,
        autoRetrieve: true,
        // itemStyle: { padding: '8px' },
        columns: [
          {
            title: 'id',
            dataIndex: 'id',
            hidden: true
          },
          {
            title: '国家编码',
            dataIndex: 'countryCode',
            xtype: 'textfield',
            align: 'left',
            sortable: true,
            allowBlank: false,
            width: 100
          },
          {
            title: '国家名称',
            dataIndex: 'description',
            xtype: 'textfield',
            align: 'left',
            sortable: true,
            allowBlank: false,
            width: 150
          },
          {
            title: '备注',
            dataIndex: 'comments',
            xtype: 'textfield',
            align: 'left',
            sortable: true,
            width: 250
          },
          {
            title: '禁用',
            dataIndex: 'snatchFlag',
            xtype: 'checkbox',
            defaultValue: 0,
            align: 'center',
            sortable: true,
            onData: 1,
            offData: 0,
            width: 80
          },
          {
            title: '创建人',
            dataIndex: 'createUser',
            xtype: 'textfield',
            defaultValue: '{user}',
            align: 'center',
            sortable: true,
            readOnly: true,
            width: 80
          },
          {
            title: '创建时间',
            dataIndex: 'createDate',
            xtype: 'textfield',
            defaultValue: '{today}',
            align: 'center',
            sortable: true,
            readOnly: true,
            width: 135
          }
        ],
        findUrl: '/smm/country/find',
        saveUrl: '/smm/country/batchsave',
        delUrl: '/smm/country/batchdelete',
        updateUrl: '/smm/country/update',
        addUrl: '/smm/country/add',
        defaultOption: true,
        tbar: [
          {
            text: '全选',
            btnId: 'selectAll'
          },
          {
            text: '增加',
            iconCls: 'add'
          },
          {
            text: '删除',
            iconCls: 'del'
          },
          {
            text: '保存',
            iconCls: 'save'
          }
        ],
        findForm: [
          {
            title: '国家编码',
            dataIndex: 'countryCode',
            xtype: 'textfield',
            width: 150
          },
          '->',
          {
            title: '国家名称',
            dataIndex: 'description',
            xtype: 'textfield',
            width: 200
          },
          {
            title: '禁用',
            dataIndex: 'snatchFlag',
            xtype: 'radiogroup',
            options: [
              { label: '可用', value: 0 },
              { label: '禁用', value: 1 },
              { label: '全部', value: undefined }
            ]
          }
        ]
      }
    }
  }
}
</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
127
128
129
130
131
132
133

# 自定义输入框，显示编辑状态

<template>
  <div :style="{ padding: '16px' }">
    <app-list ref="appListRef" :listOption="listOption">
      <template #listRow="{ row, initRow }">
        <div>
          <app-input :value.sync="row.countryCode" :columns="{ xtype: 'textfield', initSync: false }" @valueChange="(params) => valueChange(params, row, initRow)" />
          <app-input :value.sync="row.description" :columns="{ xtype: 'textfield', initSync: false }" @valueChange="(params) => valueChange(params, row, initRow)" />
        </div>
      </template>
    </app-list>
  </div>
</template>

<script>
export default {
  name: 'TestApp9',
  data () {
    return {
      listOption: {
        isEditList: true,
        findUrl: '/smm/country/find',
        saveUrl: '/smm/country/batchsave',
        delUrl: '/smm/country/batchdelete',
        updateUrl: '/smm/country/update',
        addUrl: '/smm/country/add',
        defaultOption: true,
        tbar: [
          {
            text: '增加',
            iconCls: 'add'
          },
          {
            text: '删除',
            iconCls: 'del'
          },
          {
            text: '保存',
            iconCls: 'save'
          }
        ],
        findForm: [
          {
            title: '国家编码',
            dataIndex: 'countryCode',
            xtype: 'textfield',
            width: 150
          },
          '->',
          {
            title: '国家名称',
            dataIndex: 'description',
            xtype: 'textfield',
            width: 200
          },
          {
            title: '禁用',
            dataIndex: 'snatchFlag',
            xtype: 'radiogroup',
            options: [
              { label: '可用', value: 0 },
              { label: '禁用', value: 1 },
              { label: '全部', value: undefined }
            ]
          }
        ]
      }
    }
  },
  methods: {
    valueChange ({ value }, row, initRow) {
      const $list = this.$refs.appListRef.getList()
      $list.valueChangedValidate(row, initRow)
    }
  }
}
</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
AppGrid
AppTree

← AppTree→

Theme by Vdoing | Copyright © 2023-2025 北京嘉禾云网科技有限公司