![](https://img-blog.csdnimg.cn/2019091813595558.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Ant Design
react组件库
YaaLee_
逝者如斯夫,不舍昼夜
展开
-
antd vue 调整checkbox默认样式
// 鼠标hover时候的颜色.ant-checkbox-wrapper:hover .ant-checkbox-inner,.ant-checkbox:hover .ant-checkbox-inner, .ant-checkbox-input:focus + .ant-checkbox-inner{ border: 2px solid #1BBA79 !important;}// 设置默认的颜色.ant-checkbox{ .ant-checkbox-inner{ bord原创 2021-12-14 15:59:05 · 2639 阅读 · 0 评论 -
excel导入解决空数据不导入对应表头问题
XLSX插件中有很多方法,其中就有导入的功能//表头信息XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]], {header:1,defval:''})// 表格数据XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]原创 2021-11-24 16:20:18 · 1040 阅读 · 0 评论 -
antd vue 表格无数据时表头不全显示x轴滚动条
效果:css:/deep/ .ant-table-placeholder { padding: 0; border-top: none;}原创 2021-11-24 14:06:18 · 2099 阅读 · 3 评论 -
antd vue 树结构模糊查询关键字字高亮
官方文档给的根本没法用,今天给大家带来一段简单封装的代码样例:html结构:其中最重要的就是中间的插槽了,我们采用span拼接的方式来实现关键字高亮效果<a-input-search placeholder="请输入数据集关键字" enter-button v-model="searchStr" @search="onSearch" /><a-tree :expanded-keys="expandedKeys" v-model="treeVal" s原创 2021-11-11 21:16:12 · 2464 阅读 · 4 评论 -
antd vue 表格可伸缩列
antd中 有一个表格可拖动的插件叫做vue-draggable-resizable的插件,但是按照官方文档来进行安装及引用会有一系列的报错,如下:antd vue官方文档源代码:<template> <a-table bordered :columns="columns" :components="components" :data-source="data"> <template v-slot:action> <a href="ja原创 2021-10-18 09:32:03 · 1123 阅读 · 0 评论 -
antd vue表格自定义跳转筛选
<a-button type="primary" @click="onAdd">新增</a-button><a-table :scroll="{ x:'100%',y: 'calc(100vh - 300px)' }" :columns="columns" :data-source="data" :pagination="false" bordered> <template v-for="col in ['name', 'age',原创 2021-10-12 16:45:44 · 414 阅读 · 0 评论 -
antd vue 中表格添加行自动滚动到最新行
addRow () { this.showList.push({ key: this.showList.length, yearMon: '', dmMethod: '', wellType: '', wellName: '', wellTime: '', oilInc: '' }) this.key += 1 this.$nextTick(() => { var dom = document.querySelectorA原创 2021-09-30 11:05:36 · 1068 阅读 · 2 评论 -
antd vue表格点击行事件
// 表格中加入customRow属性并绑定一个custom方法<a-table rowKey="stockOrderCode" :columns="columns" :dataSource="dataSource" :pagination="pagination" :customRow="customRow"></a-table>// methods中定义方法customRow(record, index) { return { // 这原创 2021-09-29 15:50:20 · 1190 阅读 · 0 评论 -
antd vue表格改变滚动条粗细
直接上代码/deep/.ant-table-body{ &::-webkit-scrollbar {//整体样式 height: 12px; } &::-webkit-scrollbar-thumb {//滑动滑块条样式 border-radius: 2px; -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); // background: #00aaff; background: #原创 2021-09-28 11:07:07 · 1299 阅读 · 0 评论 -
antd vue表格自适应高度问题
一个table组件复用,它只有一个scroll来控制表格下(不包含表头)的高度,所以我们得使表格高度自适应。<a-table :columns="columns" :data-source="dataList" :loading="!showTable" bordered size="small" :scroll="{ x: '100%', y: `calc(100vh - ${tableTop+280+'px'})` }" :pagination="false">原创 2021-09-24 17:24:20 · 4344 阅读 · 0 评论 -
antd vue 表格中嵌入各种表单元素(input,select,点击删除)
效果:结构:<a-table v-show="isDone==='plan'" :pagination="false" :columns="columns" :data-source="showList" bordered size="middle" :scroll="{ y: 'calc(100vh - 250px)' }"> <template v-for="col in [ 'yearMon', 'wellType','dmMethod', '原创 2021-09-24 14:39:59 · 2543 阅读 · 1 评论 -
antd vue 表格中td换行的问题
在表格组件中,是不支持 \n \r 来进行字符串的换行的,想要在单元格td下使字符串换行需要一个html格式及\br来进行换行,这时我们就需要在每个td当中建立一个插槽模板,然后再以v-html的形式来插入html格式字符串结构:<a-table :loading="loading" :pagination="false" :columns="columns" :data-source="showList" bordered size="middle" :scroll=原创 2021-09-24 14:32:52 · 2140 阅读 · 0 评论 -
Ant Design表单的使用
文章目录一、基本介绍二、this.props.form 属性提供的 API1、getFieldDecorator2、getFieldValue3、setFieldsValue4、validateFields三、格式限制验证1、输入框不能为空限制2、输入框字符限制3、自定义校验4、whitespace空格报错5、pattern正则验证一、基本介绍虽然 react 没有内置的表单验证逻辑,但是我们可以使用 react 组件库 AntDesign 中的表单组件 Form 来实现这一需求。具体地, A原创 2021-08-11 11:31:25 · 2166 阅读 · 0 评论 -
Ant Design表格插入图片
首先看效果,大体效果如下:首先引入组件库://引入connect 用于连接UI组件与reduximport { connect } from 'react-redux'import React, { Component } from 'react'import './index.css'import { Button, Input, DatePicker, Tabs, Table } from 'antd';import { ShoppingFilled, SearchOutlined, L原创 2021-08-06 09:32:45 · 3311 阅读 · 0 评论 -
Ant Design刷新页面后导航栏丢失选中状态
Router路由目录:const router = [ { "title": "后台首页", "icon": "home", "path": "/home" }, { "title": "商品管理", "icon": "carts", "path": "/catalogProduct", "children": [ {原创 2021-08-05 16:08:15 · 1447 阅读 · 0 评论 -
Ant Design的按需引入+自定义主题颜色
一、安装依赖:yarn add react-app-rewired customize-cra babel-plugin-import less less-loader二、修改package.json.... "scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test", "eject": "react-scr原创 2021-08-04 17:43:35 · 780 阅读 · 0 评论