vue中用table_Ant-Design-Vue中关于Table组件的使用
1. 如何自定义表格列头:
Name
const columns =[
{
dataIndex:'name', // 自定义列表头,则不能设置title属性align:'left',
slots: { title:'customTitle'} // 在这里定义一个slots属性,并设置一个title属性
}
]
页面将会渲染为如下:
2.如何设置自定义单行样式
// 这里传入的值分别是:record:当前行的原始数据,index:当前行的索引编辑
const columns =[
{
title:'菜单名称'dataIndex:'name', // dataIndex的值对应的是,列数据在数据项中对应的 keykey: 'name', // 如果dataIndex属性值唯一,则可以不设置key属性
align:'left',
},
{
title:'操作',
key: 'action'
dataIndex:'action',
width:'30%',
scopedSlots: { customRender:'action' }, //这一行自定义渲染这一列
align: 'center'}
]
页面展示如下:
3.如何设置表头,页脚和边框线?
// 这里添加bordered属性,就可以添加上边框线
{{text}}
// slot="title"就可以设置页头了,'title'改为其他值则没有页头Header--{{currentPageData}} // 这里打印一下currentData,看下是啥值
Footer // 跟上同理
const columns =[ // columns中并没有定义页头和页脚的相关代码
{
title:'Name',
dataIndex:'name',
scopedSlots: { customRender:'name'},
},
{
title:'Cash Assets',
className:'column-money',
dataIndex:'money',
},
{
title:'Address',
dataIndex:'address',
},
];
页面显示就结果如下:
4.表格如何树形展示数据:
:rowSelection="rowSelection">// rowSelection是列表可选择的时候的配置项,后面介绍,带有此选项表格前就会出现可选择的checkbox Name
编辑
const columns =[
{
dataIndex:'name',
key:'name',
align:'left',
slots: { title:'customTitle'}
},
{
title:'操作',
dataIndex:'action',
width:'30%',
scopedSlots: { customRender:'action'},
align:'center'}
]
const dataSource=[
{
key:1,
name:'John Brown sr.',
age:60,
address:'New York No. 1 Lake Park',
qq: [//这里我把子节点的key,改为qq了
{
key:11,
name:'John Brown',
age:42,
address:'New York No. 2 Lake Park'}
]
},
{
key:2,
name:'Joe Black',
age:32,
address:'Sidney No. 1 Lake Park'}
]
页面显示效果如下:(显示正确)
5.自定义筛选菜单:(下面的代码都太多了,有必要在点开看吧,有详细的注释)
slot="filterDropdown"slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"style="padding: 8px"
>
v-ant-ref="c => searchInput = c":placeholder="`Search ${column.dataIndex}`":value="selectedKeys[0]"@change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"@pressEnter="() => handleSearch(selectedKeys, confirm)"style="width: 188px; margin-bottom: 8px; display: block;"
/>
type="primary"@click="() => handleSearch(selectedKeys, confirm)"icon="search"size="small"style="width: 90px; margin-right: 8px"
>Search
handleReset(clearFilters)" size="small" style="width: 90px"
>Reset
slot="filterIcon"slot-scope="filtered"type="search":style="{ color: filtered ? 'red' : undefined }"
/>
v-for="(fragment, i) in text.toString().split(new RegExp(`(?<=${searchText})|(?=${searchText})`, 'i'))"
>
v-if="fragment.toLowerCase() === searchText.toLowerCase()":key="i"class="highlight"
>{{fragment}}
{{fragment}}
{{text}}
exportdefault{
data () {return{
data,
searchText:'',
searchInput:null,
columns: [
{
title:'Name',
dataIndex:'name',
key:'name',//这里的三个插槽,分别是搜索按钮插槽,定义搜索按钮样式插槽,和搜索之后的数据插槽
scopedSlots: {
filterDropdown:'filterDropdown',
filterIcon:'filterIcon',
customRender:'customRender'},//这里才是确定筛选的运行函数
onFilter: (value, record) =>record.name.toString().toLowerCase().includes(value.toLowerCase()),//自定义筛选菜单可见变化时调用
onFilterDropdownVisibleChange: visible =>{if(visible) {
setTimeout(()=>{this.searchInput.focus()
},0)
}
}
},{......}//省略了部分配置
]
}
},
methods: {
handleSearch (selectedKeys, confirm) {
confirm();//confirm会关闭搜索框
console.log(selectedKeys) //会打印出你在搜索框中输入的值
this.searchText = selectedKeys[0]
},
handleReset (clearFilters) {
clearFilters();//=> 这里面也有调用confirm方法关闭对话框
this.searchText = ''}
}
}
View Code
6.如何自定义可以编辑单行的表格?
v-for="col in ['name', 'age', 'address']":slot="col"slot-scope="text, record, index"
>
v-if="record.editable"style="margin: -5px 0":value="text"@change="e => handleChange(e.target.value, record.key, col)"
/>
{{text}}
save(record.key)">Save
cancel(record.key)">
Cancel
edit(record.key)">Edit
{title:'name',dataIndex: 'name',width: '25%',scopedSlots: { customRender: 'name'}},
{title:'age',dataIndex: 'age',width: '15%',scopedSlots: { customRender: 'age'}},
{title:'address',dataIndex: 'address',width: '40%',scopedSlots: { customRender: 'address'}},
{title:'operation',dataIndex: 'operation',scopedSlots: { customRender: 'operation'}}
];
const data=[];for (let i = 0; i < 100; i++) {
data.push({
key: i.toString(),
name: `Edrward ${i}`,
age:32,
address: `London Park no. ${i}`,
});
}
exportdefault{
data() {this.cacheData = data.map(item => ({ ...item })); //缓存所有数据
return{
data,
columns,
};
},
methods: {/**
* input的change的回调方法
* @param value input框中你输入的值
* @param key 当前行对应的key值
* @param column 当前列的dataIndex对应的名称,有['name','age','address']*/handleChange(value, key, column) {
const newData= [...this.data];
const target= newData.filter(item => key === item.key)[0];
console.log(column);if(target) {
target[column]=value;this.data =newData;
}
},/**
* 点击操作栏中修改的回调方法
* @param key 当前行对应的key值*/edit(key) {
const newData= [...this.data];//直接获取了所有数据
const target = newData.filter(item => key === item.key)[0]; //在筛选出key值相同的那一条数据
if (target) { //如果数据存在,则给这条数据新增一个属性为editable属性为true => 代表为正在更改中
target.editable = true;this.data =newData;
}
},/**
* 修改完成之后点击保存的回调方法
* @param key 当前行对应的key值*/save(key) {
const newData= [...this.data];
const newCacheData= [...this.cacheData];
const target= newData.filter(item => key === item.key)[0];
const targetCache= newCacheData.filter(item => key === item.key)[0];if (target &&targetCache) {delete target.editable; //删除editable属性
this.data =newData;
Object.assign(
targetCache,
target
);this.cacheData =newCacheData;
}
},/**
* 点击取消编辑的回调方法
* @param key 当前行对应的key值*/cancel(key) {
const newData= [...this.data];
const target= newData.filter(item => key === item.key)[0];if (target) { //将缓存的值重新复制给原先的数据,并删除editable属性
Object.assign(target, this.cacheData.filter(item => key === item.key)[0]);deletetarget.editable;this.data =newData;
}
},
},
};
margin-right: 8px;
}
View Code
7.如何定义可展开的table?
Delete
{{index}}
{{record}}--{{index}}--{{indent}}--{{expanded}}
{ title:'Name', dataIndex: 'name', key: 'name'},
{ title:'Age', dataIndex: 'age', key: 'age'},
{ title:'Address', dataIndex: 'address', key: 'address'},
{ title:'Action', dataIndex: '', key: 'x', scopedSlots: { customRender: 'action'} },
];
const data=[
{
key:1,
name:'John Brown',
age:32,
address:'New York No. 1 Lake Park',
description:'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.',
}
];
exportdefault{
data() {return{data,columns,};
},
};
View Code
8.最后来一个带分页的表格
{itle:'Name',dataIndex:'name'},
{title:'Age',dataIndex:'age'},
{title:'Address',dataIndex:'address'}
]
const data=[]for(let i= 0; i< 46; i++) {
data.push({
key: i,
name: `Edward King ${i}`,
age:32,
address: `London, Park Lane no. ${i}`
})
}
exportdefault{
data () {return{
data,
columns
ipagination: {
current:1,
pageSize:10,
total: data.length,
showSizeChanger:true,
showQuickJumper:true,
pageSizeOptions: ['10','20','30'],//这里注意只能是字符串,不能是数字
showTotal: (total, range)=>`显示${range[0]}-${range[1]}条,共有 ${total}条`
}
}
}
}
9.建议看官方组件案列中的,自定义选择项案例,看完弄懂,表格的基本使用没有问题了。大家使用的时候遇到了什么问题可以来沟通一下啊。。。
vue中用table_Ant-Design-Vue中关于Table组件的使用相关推荐
- antd 中的 table 组件设置 size 属性值为 small 后,表头背景色设置的解决方案
antd中的 table 组件的效果图: 默认size属性值是default : 当设置size="small" ; 表头的背景色没有了: 解决方案:在表格列里面设置 classN ...
- ant vue 语言_Ant Design Vue是什么
Ant Design Vue 是蚂蚁金服 Ant Design 官方唯一推荐的Vue版UI组件库,组件的风格与Ant Design保持同步,组件的html结构和css样式也保持一致. Ant Desi ...
- vue ui无效_vue开发中,父组件添加scoped之后。解决在父组件中无法修改子组件样式问题。...
在vue的开发中,我们需要引用子组件,包括ui组件(element.iview).但是在父组件中添加scoped之后,在父组件中书写子组件的样式是无效果的.去掉scoped之后,样式可以覆盖.但这样会 ...
- Vue笔记-Ant Design Vue构建前端连接后端WebSocket
运行结果如下: 程序结构如下: 关键代码: App.vue <template><a-layout class="layout"><a-layout- ...
- vue中用table_element-ui中的 table 组件在vue中的使用
经常使用 element-ui 的小伙伴应该对 el-table 组件非常熟悉,通常它长下面这个样子: 但是我们可以使用使用 v-for 来优化模版中的 el-table-column v-for=& ...
- Vue笔记-Ant Design Vue的使用(Vue3)
这里文档要这样看: 这里 npm install ant-design-vue@2.0.0-rc.3 -savenpm install axios@0.21.0 --save 在main.js中添加a ...
- [ant design vue] 关于ant design vue 表单报错合集
情况一:当我点击新增时会报以下错误: 原因是我在使用v-decorator的同时使用了v-model,如下图: 解决方案就是:把v-model删掉,需要动态获取值,可以通过: this.form.ge ...
- ant design vue 中Upload组件如何自定义文件列表的样式
ant design vue 中Upload组件如何自定义文件列表的样式 问题 历程 UploadList 组件源码 h() 方法 实现 注 问题 技术:vue.ant design vue 在开发项 ...
- Vue实战(六)通用Table组件
本文是Vue实战系列的第六篇文章,主要介绍Falcon项目中通用 Table 组件的开发和使用 .Falcon项目地址:https://github.com/thierryxing/Falcon 通用 ...
最新文章
- 【java】兴唐第三十节课之零三知识点总结
- 解决ubuntu 远程连接问题
- Puppet 的部署与应用,看这一篇就够了
- 在ARM Linux下使用GPIO模拟SPI时序详解
- java cas volatile_每日一个知识点:Volatile 和 CAS 的弊端之总线风暴
- 工作137:map函数
- Linux workqueue疑问【转】
- 国产特斯拉遭疯狂吐槽:涨价、车尾带汉字标、续航打折扣
- 高等数学学习笔记——第十八讲——函数连续的概念
- C/C++程序员桌面壁纸---简尚黑
- php 开源 博客,推荐常用PHP开源博客TOP10
- 常用贴片电阻、电容、电感封装
- 表贴电阻尺寸与什么有关_贴片电阻、贴片电容规格、封装、尺寸、功率(转)
- Java 网络编程:(七)UDP网络编程
- SpringBoot2基础篇
- 计算机毕业设计(17)python毕设作品之鲜花水果销售系统
- 屏幕录制和编辑神器ScreenFlow轻松上手
- R语言:calendarHeat日历图(PM2.5)
- java-php-python-springboot线上教学平台计算机毕业设计
- 疯狂涨知识!拥有百万粉丝的大牛讲述学Android的历程,挥泪整理面经