基于Vue2的antDesign组件总结
主要包括以下组件
- 表格
表格组件a-table
一、带复选框的表格,用户点击按钮,实现选择的复选框清空
<a-table
:rowKey="row=>{return row.id}"
:row-selection="rowSelection" >
</a-table>
data() {
selectedRowKeys : [] // 清空选中的项
}
computed: {
rowSelection() {
return {
selectedRowKeys : this.selectedRowKeys, // 一定要加上这一行代码,清除才会有作用
// 这里不能加括号
onChange: this.selectedTableRows,
// 内置的禁止选中
getCheckboxProps : (record) =>({
props : {
disabled : record.isInner
}
}),
};
}
},
methods: {
// 勾选表格复选框
selectedTableRows(selectedRowKeys, selectedRows) {
// 批量选中的key
this.selectedRowKeys = selectedRowKeys;
},
}
二、点击表头排序触发接口
<a-table
@change="handleTableChange" >
</a-table>
// 操作表格(排序)
handleTableChange(pagination, filters, sorter, { currentDataSource }) {
let order = sorter.order === "ascend" ? "ASC" : "DESC";
// 改变父组件的表格列表接口参数,使用watch触发接口请求
this.$parent.permissionTableParams[`${sorter.columnKey}Rank`] = order;
},
最终:表格组件的开发bug总结
一、样式
- 1、在使用ant-design-vue库的表格组件的时候,表格内因为有a-switch开关组件,导致在鼠标经过当前行的后,a-switch所在的td,border-bottom样式消失;【偶尔触发】
解决:取消 表格鼠标移入的行 背景色样式
a-table的父级盒子选择器 >>> .ant-table-tbody > tr:hover:not(.ant-table-expanded-row) > td,.ant-table-row-hover,.ant-table-row-hover>td{
background:none !important;
}
二、逻辑
a-pagination分页组件
一、分页控件英文显示的问题
Pagination组件官网结果示例:
复制官网demo代码后运行显示英文:
解决如下
// 官网是a-locale-provider (已弃用)
<a-config-provider :locale="locale">
<div id="app">
<keep-alive>
<router-view />
</keep-alive>
</div>
</a-config-provider>
<script>
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN';
export default {
data() {
return {
locale: zhCN,
};
},
};
</script>
二、分页组件的分页事件
注意:使用showSizeChange事件有效,使用change事件无效
<a-pagination @showSizeChange="paginationChange" size="small" :total="total" :show-total="total => `共 ${total} 条`" show-size-changer />
// 表格分页
paginationChange(current, size) {
this.$parent.permissionTableParams.current = current;
this.$parent.permissionTableParams.size = size;
}
a-input组件
一、取消a-input的默认样式
/* 去掉input聚焦的样式 */
.search-ipt input:focus {
box-shadow: none;
}
/* 去掉input的边框和白色背景 */
.search-ipt input {
border: none !important;
background-color: transparent;
}
a-selected组件
一、取消a-selected的聚焦默认样式
/* 去掉下拉框select 的聚焦样式 */
.introduction-box .ant-select-open .ant-select-selection,
.introduction-box .ant-select-focused .ant-select-selection,
.introduction-box .ant-select-selection:focus,
.introduction-box .ant-select-selection:active{
box-shadow: none !important;
}