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

一只琪琪子

已于 2022-07-04 10:37:35 修改

阅读量2k

点赞数 1

分类专栏： vue 文章标签： vue.js 前端框架

于 2022-07-04 10:34:33 首次发布

本文链接：https://blog.csdn.net/ActiveQi/article/details/125594058

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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>

这样你找到它的类名进行修改就可以了
（参考文章：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"

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>

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
        };
    }
});