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组件的使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python 分布式锁_python分布
- 下一篇： shell题库选择题_linux操作题及