基于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;
}