分类：Table组件

2022
01-12

vue.js管理后台table组件封装的方法

目录问题分析为什么封装封装的内容都有哪些封装table组件确认数据格式封装组件封装全局组件table组件封装分页组件封装数据定义封装总结最近开了新的项目，简单说了自己的table封装。问题分析为什么封装首先为什么封装，是因为追求技术吗，不，是因为懒，不想一直的去粘贴复制代码，所以就想把table封装下，可以在创建新的table的时候，只需要填充数据就行了。封装的内容都有哪些主要有两个，一个是table组件，一个是分页组件搞清楚... 继续阅读 >

2021
12-11

Vue封装通用table组件的完整步骤记录

目录前言为什么需要封装table组件？第一步：定义通用组件第二步：父组件与子组件进行render通信第三步：使用组件总结前言随着业务的发展和功能的增多，我们发现不少页面都具备相似的功能，这里举几个比较俗的例子：可以多选的下拉菜单，带输入的对话框，日期选择器等等，于是我们会想办法将这些共有的功能抽取成一个个公共组件，以便能够在不同的页面或业务中使用。为什么需要封装table组件？后台管理系统表格使用频率高，减少关于... 继续阅读 >

2020
11-19

Antd-vue Table组件添加Click事件,实现点击某行数据教程

给Table组件添加Click事件,实现点击某行数据操作customRow设置行属性Function(record,index)通过customRow属性给table添加自定义事件<a-table:columns="columns":dataSource="data":rowSelection="{selectedRowKeys:selectedRowKeys,onChange:onSelectChange,onSelect:handleSelect}"bordered:customRow="handleClickRow"></a-table>methods:{handleClickRow(record,inde... 继续阅读 >

2020
11-19

ant design的table组件实现全选功能以及自定义分页

我就废话不多说了，大家还是直接看代码吧~antdesign的table组件实现全选功能以及自定义分页直接附上全部代码以及截图了import'./index.scss';importReactfrom'react';import{Checkbox,Table,Popconfirm}from'antd';classTestComponentextendsComponent{constructor(props){super(props);this.state={visible:false,indeterminate:true,checkAll:false,data:this.getData(),pageSize:10};}s... 继续阅读 >

2020
11-13

解决iview table组件里的 固定列 表格不自适应的问题

当在使用iviewTable组件里固定列功能时出现表格不自适应宽度问题具体如下解决这个bug很简单把组件里的width改为minWidth即可columns:[{title:'账户名',key:'accountName',fixed:'left',minWidth:150},{title:'订阅名称',key:'subscriptionName',minWidth:140},{title:'订阅ID',key:'subscriptionId',minWidth:200},{title:'资源组',key:'resourceGroup',... 继续阅读 >

2020
10-30

Ant-design-vue Table组件customRow属性的使用说明

官网示例使用方式//表格中加入customRow属性并绑定一个custom方法<a-tablerowKey="stockOrderCode":columns="columns":dataSource="dataSource":pagination="pagination":customRow="customRow"></a-table>//methods中定义方法customRow(record,index){return{//这个style就是我自定义的属性，也就是官方文档中的propsstyle:{//字体颜色color:record.remarkDesc?record.remarkDesc.fon... 继续阅读 >

2020
10-30

解决Antd Table组件表头不对齐的问题

背景：在使用Antd的table组件时，由于表头参数过多，于是设置了scroll属性，在其超出一定宽度后进行滚动但是在添加了该属性之后，经常会出现表头不对齐的问题：针对该问题Google了一下解决方案，但大多不是很完善，为解决问题。现整理下完整的解决方案：1、对表格的每一行【columns】设置width属性（留出一行进行宽度自适应）；2、scroll属性中的x选择一个合适的值（或者直接设为max-content）；如果以上两步仍解决不了对齐问题... 继续阅读 >

2020
10-28

Ant Design的Table组件去除

在AntDesign的Table组件文档中，排序有三种状态：点击升序、点击降序、取消排序。一般需求只需要升序和降序，不需要取消排序，这时候就需要我们设置sortOrder来去除取消排序。首先，我们从官方文档中ctrl+c出一个排序栗子，放在我们的组件中。官方栗子importReact,{useEffect,useState}from'react';import{Table}from'antd'exportdefault()=>{const[data,setData]=useState([{key:'1',name:'JohnBrown... 继续阅读 >