ant design
小仙女de成长
啊麻利麻利哄
展开
-
antd组件自定义table单元格内容样式
效果判断数据的值修改显示字体的颜色在使用 columns 时,可以通过scopedSlots属性配置支持 slot-scope 的属性。<a-table :columns="columns" :data-source="data" :scroll="{ x: 1500,y:400}" rowKey="序号"> <div slot="日常剔除比例" slot-scope="text" style="color: red;" v-if=" text > 13">转载 2021-06-29 16:37:52 · 2674 阅读 · 0 评论 -
ant-design-vue 中table行 绑定点击事件
目前在学习使用antd中,需求双击表格行显示pdf,在table中给customRow设置行属性 <a-table bordered :rowSelection="rowSelection" :columns="columns" :dataSource="data" rowKey="id" :customRow="Rowclick" :pagination="pagination" :scr转载 2021-06-23 15:50:32 · 714 阅读 · 0 评论 -
tree树状图表格的呈现,数据结构
flattenData(){varflatten=(dt,prefix='')=>{letdata={}constnewPrefix=`${prefix}.Child`data[newPrefix]=[]dt.forEach(d=>{if(d.Child){data[newPrefix]=data[newPr...原创 2021-01-28 15:02:04 · 301 阅读 · 0 评论 -
合并table
<template> <a-table :columns="columns" :data-source="dataSource" :pagination="false" :customRow="behaviour" bordered /></template><script>import { getAction, putAction, deleteAction, httpAction, postAction } from '@/api/manage.原创 2021-01-28 08:30:13 · 255 阅读 · 0 评论 -
ant design中时间选择器搜索和清空的操作
需求是开始时间和结束时间的搜索和重置在methods方法中写绑定事件第二个属性dataString是我们选中的时间,也是往后台传递的值。在data中定义v-model绑定的属性值重置按钮是需要对传入后端的时间值进行清空外,还需要对v-model绑定的值进行undefined,这样才达到清空的目的...转载 2020-11-26 15:13:36 · 1038 阅读 · 0 评论 -
Statistic统计数值给value值标记颜色
效果就类似这样<a-statistic title="Idle" :value="9.3" :precision="2" suffix="%" class="demo-class" :value-style="{ color: 'red' }" > <template #prefix>.原创 2020-11-25 14:32:18 · 3368 阅读 · 6 评论 -
Ant Design Upload 文件上传功能
一、Ant Design Vue文件上传功能文件上传选项框 <a-modal title="上传文件" :footer="null"//不显示底部按钮 :visible="visible"//是否显示 :confirmLoading="confirmLoading"//确定按钮 loading @cancel="handleCancel"//取消方法 > <a-upload :file转载 2020-11-24 09:54:30 · 2754 阅读 · 0 评论 -
antdv: Each record in table should have a unique `key` prop,or set `rowKey` to an unique primary ke
问题描述使用antd中的Table时,一直报这个错 searchList:[ { num:'1', name:'即时配送行业', firstCategory:'配送服务', age:'18-46岁', area:'企业经营区域', female:'6.31%', male:'93.69%', money1:'90%',原创 2020-11-23 17:05:29 · 1527 阅读 · 0 评论 -
ant-design-vue Table组件去掉自带分页器
<a-table :columns="columns" :data-source="data" :pagination="false" //去除自带分页器 :scroll="{ y: 240 }" />转载 2020-11-21 10:37:46 · 5326 阅读 · 1 评论 -
vue+Ant design后台系统左侧菜单动态生成
1、Menu入门一般先来个导航栏,咱用Antd的Menu组件官方会给你一组写好的死数据的实例,但是在项目中我们一般写成动态。vue中写动态数据,方便的亚批,不仅代码优美,还简洁易读。HTML: <a-menu @click="navClick" style="width: 256px" v-model="currentSelectChild" @openChange="onOpen转载 2020-11-19 18:12:04 · 2163 阅读 · 2 评论 -
textarea鼠标聚焦边框颜色
.textarea { height: 78%; width: 99%; resize: none; border: 1px solid rgb(193, 222, 250); border-radius: 4px; padding: 5px; outline-color: rgba(83, 160, 231, 0.61); // 鼠标聚焦边框颜色然后就能看到效果啦转载 2020-11-18 14:57:03 · 1451 阅读 · 1 评论 -
ant-design-vue中a-date-picker组件只选择年份
<a-form-model-item label="开始年限:" prop="all_plan_one" > <a-date-picker mode="year" placeholder="请选择年份" format='YYYY' v-model="addForm.all_plan_one" style="width:100%" :open='yearShowOne' @openChange="openChangeOne" .转载 2020-11-12 11:46:37 · 3278 阅读 · 1 评论 -
antd-design-vue modal模态框组件自定义footer脚部的按钮
项目中需求,模态框只保留一个确定按钮,去掉取消按钮。官方文档中只写了去掉全部的脚部按钮,:footer设置为null,这个补不满足需求,在多查找资料解决了此问题在slot插槽中,重新定义按钮代码如下: <a-modal :title="title" :width="950" okText="确定" cancelText="取消" :visible="visible" @cancel转载 2020-11-11 10:14:48 · 5666 阅读 · 0 评论 -
antd-vue中给table表格整行加点击事件
<a-table :columns="columns" :dataSource="data" :loading="loading" :pagination="pagination" :rowKey="record => record.id" @change="paginationChange" bordered :customRow="click" // 这个是重点,主要是给table添加属性的作用> // 内.转载 2020-11-10 13:46:05 · 1644 阅读 · 0 评论 -
vue + ant design 之table添加操作按钮和获取当前行数据
table添加操作按钮和获取当前行数据 <a-table class="user_table" :columns="columns" :data-source="roleList" :rowKey="roleList.key" > <template slot="action" slot-scope="text,record"> <a slot="action" href="javascr..转载 2020-11-10 09:59:18 · 3845 阅读 · 0 评论