vue3.0+ant design vue3.2.6框架的基本使用

1、a-select修改默认样式

通过f12检查元素 发现select选择器和app根节点同级，所以需要添加 getPopupContainer

<a-select ref="select" v-model:value="value1" style="width: 120px" :options="options1" placeholder="请选择" :getPopupContainer="(triggerNode) => triggerNode.parentNode"></a-select>
1

这样你找到它的类名进行修改就可以了
（参考文章：https://blog.csdn.net/weixin_52691965/article/details/124689170?spm=1001.2014.3001.5506）

2、a-modal的使用

①修改默认样式：它也是跟app节点同级 所以要通过getContainer属性改变它的指向(使用这个属性，外面必须包个div)

挂载到对应的div的ref上

参考文章：https://blog.csdn.net/i_am_a_div/article/details/107709190?spm=1001.2014.3001.5506
②关闭刚打开弹窗时的动画，添加transitionName属性即可

transitionName="none" 
1

3、a-table的使用(固定列、可伸缩列、斑马纹、排序、筛选项)

<a-table class="ant-table-striped" :columns="columns" :data-source="data" size="small" :scroll="{ x: 1500, y: 300 }" :row-selection="rowSelection" :loading="loading" bordered :pagination="false" :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)" @resizeColumn="handleResizeColumn">
            <template #headerCell="{ column, title }">
                <template v-if="column.key === 'name'">
                    <span>{{title}}</span>
                </template>
            </template>
            <!-- 添加筛选项 -->
            <template #customFilterDropdown="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }">
                <div style="padding: 8px">
                    <!-- 日期 -->
                    <a-date-picker show-time placeholder="查询上传时间"
                        v-if="column.dataIndex == 'uploadTime'" 
                        format="YYYY-MM-DD HH:mm:ss" 
                        :value="selectedKeys[0]"
                        @change="dateString => setSelectedKeys(dateString ? [dateString] : [])" />
                    <!-- 输入框 -->
                    <a-input
                        v-else
                        ref="searchInput"
                        :placeholder="`查询${column.title}`"
                        :value="selectedKeys[0]"
                        style="width: 188px; margin-bottom: 8px; display: block"
                        @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
                        @pressEnter="handleSearch(selectedKeys, confirm, column.dataIndex)"/>
                    <div style="margin-top:10px;text-align:right;">
                        <a-button size="small" @click="handleReset(clearFilters)" style="margin:0 5px;">重置</a-button>
                        <a-button type="primary" size="small" style="margin:0 5px;"
                            @click="handleSearch(selectedKeys, confirm, column.dataIndex)">确定</a-button>
                    </div>
                </div>
            </template>
            <template #customFilterIcon="{ filtered }">
                <search-outlined :style="{ color: filtered ? '#108ee9' : undefined }" />
            </template>
            <!--  -->
            <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'index'">
                    <span>{{ record.key }}</span>
                </template>
                <template v-else-if="column.key === 'name'">
                    <span>{{ record.name }}
                        <a-image :width="20" :height="20" src="https://aliyuncdn.antdv.com/logo.png"/>
                    </span>
                </template>
                <template v-else-if="column.key === 'size'">
                    <span>{{ record.size }}</span>
                </template>
                <template v-else-if="column.key === 'customerNum'">
                    <span>{{ record.customerNum }}</span>
                </template>
                <template v-else-if="column.key === 'uploadTime'">
                    <span>{{ record.uploadTime }}</span>
                </template>
                <template v-else-if="column.key === 'uploadSpeed'">
                    <span>
                        <a-progress :percent="record.uploadSpeed" />
                    </span>
                </template>
                <template v-else-if="column.key === 'uploadResult'">
                    <span v-if="record.uploadResult == '上传失败'" class="icon-upload">
                        {{ record.uploadResult }}
                        <a-progress type="circle" :percent="100" :width="15" status="exception"/>
                    </span>
                    <span v-if="record.uploadResult == '上传成功'" class="icon-upload">
                        {{ record.uploadResult }}
                        <a-progress type="circle" :percent="100" :width="15" />
                    </span>
                </template>
            </template>
        </a-table>
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

import { defineComponent, toRefs, reactive, ref, toRaw, onMounted, computed } from "vue";
//筛选项：上传时间
const dateFn = (date,record) =>{
    // 标准时间转换成 年-月-日 时:分:秒(2019-10-12 15:19:33)
    let Y = date.getFullYear()
    let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1)
    let D = date.getDate() < 10 ? ('0' + date.getDate()) : date.getDate()
    let hours = date.getHours()
    let minutes = date.getMinutes() < 10 ? ('0' + date.getMinutes()) : date.getMinutes()
    let seconds = date.getSeconds() < 10 ? ('0' + date.getSeconds()) : date.getSeconds()
    date = Y + '-' + M + '-' + D + ' ' + hours + ':' + minutes + ':' + seconds
    return record.uploadTime.includes(date)
}

// 表头
const columns = ref([
  {
    title: '序列号',
    dataIndex: 'index',
    key: 'index',
    fixed: 'left',
    width: 75,
    align: 'center',
  },
  {
    title: '文件名称',
    dataIndex: 'name',
    key: 'name',
    fixed: 'left',
    width: 300,
    align: 'center',
    resizable: true,
    customFilterDropdown: true,
    onFilter: (value, record) =>record.name.toString().toLowerCase().includes(value.toLowerCase()),
    sorter: (a, b) => a.name.length - b.name.length,
    sortDirections: ['descend', 'ascend'],
  },
  {
    title: '文件大小',
    dataIndex: 'size',
    key: 'size',
    width: 120,
    align: 'center',
    resizable: true,
    customFilterDropdown: true,
    onFilter: (value, record) =>record.size.toString().toLowerCase().includes(value.toLowerCase()),
    sorter: (a, b) => { return a.size> b.size? 1 : -1 },
    sortDirections: ['descend', 'ascend'], // 默认上到下为由大到小的顺序
  },
  {
    title: '客户订单号',
    dataIndex: 'customerNum',
    key: 'customerNum',
    width: 180,
    align: 'center',
    resizable: true,
    customFilterDropdown: true,
    onFilter: (value, record) =>record.customerNum.toString().toLowerCase().includes(value.toLowerCase()),
    sorter: (a, b) => a.customerNum.length - b.customerNum.length,
    sortDirections: ['descend', 'ascend'],
  },
  {
    title: '上传时间',
    key: 'uploadTime',
    dataIndex: 'uploadTime',
    width: 180,
    align: 'center',
    resizable: true,
    customFilterDropdown: true,
    onFilter:(value,record)=> dateFn(value.$d,record),// value.$d 获取的是当前他要查询的时间
    sorter: (a, b) => { return a.uploadTime> b.uploadTime? 1 : -1 },
    sortDirections: ['descend', 'ascend'], // 默认上到下为由大到小的顺序
  },
  {
    title: '上传进度',
    key: 'uploadSpeed',
    dataIndex: 'uploadSpeed',
    width: 150,
    align: 'center',
    resizable: true,
    customFilterDropdown: true,
    sorter: (a, b) => { return a.uploadSpeed> b.uploadSpeed? 1 : -1 },
    sortDirections: ['descend', 'ascend'], // 默认上到下为由大到小的顺序
    onFilter: (value, record) =>record.uploadSpeed.toString().toLowerCase().includes(value.toLowerCase())
  },
  {
    title: '上传结果',
    key: 'uploadResult',
    dataIndex: 'uploadResult',
    width: 120,
    align: 'center',
    resizable: true,
    filters: [
      {
        text: '待上传',
        value: '待上传',
      },
      {
        text: '上传成功',
        value: '上传成功',
      },
      {
        text: '上传失败',
        value: '上传失败',
      }
    ],
    filterMultiple: false,
    onFilter: (value, record) => record.uploadResult.indexOf(value) === 0,
    sorter: (a, b) => a.uploadResult.length - b.uploadResult.length,
    sortDirections: ['descend', 'ascend']
  }
]);
// 表格数据
const data = [
  {
    key: '1',
    name: '220309_文件名010',
    size: '324.68KB',
    customerNum: '通知220309',
    uploadTime: '2022-04-19 17:01:06',
    uploadSpeed: '60',
    uploadResult: '上传成功',
  },
  {
    key: '2',
    name: '220309_文件名020',
    size: '324.78KB',
    customerNum: '通知220310',
    uploadTime: '2022-04-23 13:13:11',
    uploadSpeed: '50',
    uploadResult: '上传失败'
  },
  {
    key: '3',
    name: '220309_文件名0040',
    size: '125.98KB',
    customerNum: '通知01_220309',
    uploadTime: '2022-07-01 16:01:06',
    uploadSpeed: '75',
    uploadResult: '上传成功'
  },
];
export default defineComponent({
    setup(props, context) {
        const state = reactive({
            selectedRowKeys: [],
        });

        const getList = () => { };
        onMounted(() => {
            getList();
        });
        // 全选
        const rowSelection = computed(() => {
            return {
                selectedRowKeys: state.selectedRowKeys,
                hideDefaultSelections: true,
                onChange: (selectedRowKeys) => {
                    state.selectedRowKeys = selectedRowKeys;
                },
            }
        })
        // 拖动改变表头宽度
        const handleResizeColumn = (w, col) => {
            col.width = w;
        }
        // 列表筛选项输入框
        const handleSearch = (selectedKeys, confirm, dataIndex) => {
            confirm();
            state.searchText = selectedKeys[0];
            state.searchedColumn = dataIndex;
        };
        // 筛选项重置
        const handleReset = clearFilters => {
            clearFilters({ confirm: true });
            state.searchText = '';
        };
        const searchInput = ref();
        return {
            data,
            columns,
            onChange,
            rowSelection,
            handleResizeColumn,
            handleReset,
            handleSearch,
            searchInput,
            ...toRefs(state), 
            dateFn
        };
    }
});
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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192

效果图：

参考：对日期时间进行排序：https://blog.csdn.net/qq_39840470/article/details/112175610?spm=1001.2014.3001.5506