免費AI編程助手
Element-React Table 表格組件
2020-10-16 11:20 更新
用于展示多條結(jié)構(gòu)類似的數(shù)據(jù)，可對數(shù)據(jù)進(jìn)行排序、篩選、對比或其他自定義操作。
基礎(chǔ)表格
基礎(chǔ)的表格展示用法。
當(dāng)Table元素中注入data和columns 對象數(shù)組后，在column中用prop屬性來對應(yīng)對象中的鍵名即可填入數(shù)據(jù)，用label屬性來定義表格的列名?？梢允褂?code>width屬性來定義列寬。
constructor(props) {
super(props);
this.state = {
columns: [
{
label: "日期",
prop: "date",
width: 180
},
{
label: "姓名",
prop: "name",
width: 180
},
{
label: "地址",
prop: "address"
}
],
data: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1516 弄'
},{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1516 弄'
}]
}
}
render() {
return (
<Table
style={{width: '100%'}}
columns={this.state.columns}
maxHeight={200}
data={this.state.data}
/>
)
}帶斑馬紋表格
使用帶斑馬紋的表格，可以更容易區(qū)分出不同行的數(shù)據(jù)。
stripe屬性可以創(chuàng)建帶斑馬紋的表格。它接受一個Boolean，默認(rèn)為false，設(shè)置為true即為啟用。
constructor(props) {
super(props);
this.state = {
columns: [
{
label: "日期",
prop: "date",
width: 180
},
{
label: "姓名",
prop: "name",
width: 180
},
{
label: "地址",
prop: "address"
}
],
data: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1516 弄'
}]
}
}
render() {
return (
<Table
style={{width: '100%'}}
columns={this.state.columns}
data={this.state.data}
stripe={true}
/>
)
}帶邊框表格
默認(rèn)情況下，Table 組件是不具有豎直方向的邊框的，如果需要，可以使用border屬性，它接受一個Boolean，設(shè)置為true即可啟用。
constructor(props) {
super(props);
this.state = {
columns: [
{
label: "日期",
prop: "date",
width: 180
},
{
label: "姓名",
prop: "name",
width: 180
},
{
label: "地址",
prop: "address"
}
],
data: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1516 弄'
}]
}
}
render() {
return (
<Table
style={{width: '100%'}}
columns={this.state.columns}
data={this.state.data}
border={true}
/>
)
}帶狀態(tài)表格
可將表格內(nèi)容 highlight 顯示，方便區(qū)分「成功、信息、警告、危險」等內(nèi)容。
可以通過指定 Table 組件的 rowClassName 屬性來為 Table 中的某一行添加 class，表明該行處于某種狀態(tài)。
constructor(props) {
super(props);
this.state = {
columns: [
{
label: "日期",
prop: "date",
width: 180
},
{
label: "姓名",
prop: "name",
width: 180
},
{
label: "地址",
prop: "address"
}
],
data: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1516 弄'
}]
}
}
render() {
return (
<Table
style={{width: '100%'}}
columns={this.state.columns}
data={this.state.data}
stripe={true}
/>
)
}
rowClassName(row, index) {
if (index === 1) {
return 'info-row';
} else if (index === 3) {
return 'positive-row';
}
return '';
}
render() {
return (
<Table
style={{width: '100%'}}
rowClassName={this.rowClassName.bind(this)}
columns={this.state.columns}
data={this.state.data}
/>
)
}固定表頭
縱向內(nèi)容過多時，可選擇固定表頭。
只要在Table元素中定義了height屬性，即可實現(xiàn)固定表頭的表格，而不需要額外的代碼。
constructor(props) {
super(props);
this.state = {
columns: [
{
label: "日期",
prop: "date",
width: 180
},
{
label: "姓名",
prop: "name",
width: 180
},
{
label: "地址",
prop: "address"
}
],
data: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1516 弄'
},{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1516 弄'
}]
}
}
render() {
return (
<Table
style={{width: '100%'}}
columns={this.state.columns}
data={this.state.data}
border={true}
height={250}
/>
)
}固定列
橫向內(nèi)容過多時，可選擇固定列。
固定列需要使用fixed屬性，它接受 Boolean 值或者left right，表示左邊固定還是右邊固定。
constructor(props) {
super(props);
this.state = {
columns: [
{
label: "日期",
prop: "date",
width: 150,
fixed: 'left'
},
{
label: "姓名",
prop: "name",
width: 160
},
{
label: "省份",
prop: "province",
width: 160
},
{
label: "地址",
prop: "address",
width: 400
},
{
label: "郵編",
prop: "zip",
width: 120
},
{
label: "操作",
prop: "zip",
fixed: 'right',
width: 100,
render: ()=>{
return <span><Button type="text" size="small">查看</Button><Button type="text" size="small">編輯</Button></span>
}
}
],
data: [{
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀區(qū)',
address: '上海市普陀區(qū)金沙江路 1518 弄',
zip: 200333
},{
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀區(qū)',
address: '上海市普陀區(qū)金沙江路 1518 弄',
zip: 200333
},{
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀區(qū)',
address: '上海市普陀區(qū)金沙江路 1518 弄',
zip: 200333
},{
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀區(qū)',
address: '上海市普陀區(qū)金沙江路 1518 弄',
zip: 200333
},{
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀區(qū)',
address: '上海市普陀區(qū)金沙江路 1518 弄',
zip: 200333
}]
}
}
render() {
return (
<Table
style={{width: '100%'}}
columns={this.state.columns}
data={this.state.data}
border={true}
/>
)
}
固定列和表頭
橫縱內(nèi)容過多時，可選擇固定列和表頭。
固定列和表頭可以同時使用，只需要將上述兩個屬性分別設(shè)置好即可。
constructor(props) {
super(props);
this.state = {
columns: [
{
label: "日期",
prop: "date",
width: 150,
fixed: 'left',
align: 'center'
},
{
label: "姓名",
prop: "name",
width: 160,
align: 'right'
},
{
label: "省份",
prop: "province",
width: 160
},
{
label: "地址",
prop: "address",
width: 400
},
{
label: "郵編",
prop: "zip",
width: 120
}
],
data: [{
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀區(qū)',
address: '上海市普陀區(qū)金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀區(qū)',
address: '上海市普陀區(qū)金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀區(qū)',
address: '上海市普陀區(qū)金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀區(qū)',
address: '上海市普陀區(qū)金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀區(qū)',
address: '上海市普陀區(qū)金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀區(qū)',
address: '上海市普陀區(qū)金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀區(qū)',
address: '上海市普陀區(qū)金沙江路 1518 弄',
zip: 200333
}]
}
}
render() {
return (
<Table
style={{width: '100%'}}
columns={this.state.columns}
data={this.state.data}
border={true}
height={250}
/>
)
}
流體高度
當(dāng)數(shù)據(jù)量動態(tài)變化時，可以為 Table 設(shè)置一個最大高度。
當(dāng)數(shù)據(jù)量動態(tài)變化時，可以為 Table 設(shè)置一個最大高度 maxHeight。
constructor(props) {
super(props);
this.state = {
columns: [
{
label: "日期",
prop: "date",
width: 150,
fixed: 'left',
align: 'center'
},
{
label: "姓名",
prop: "name",
width: 160,
align: 'right'
},
{
label: "省份",
prop: "province",
width: 160
},
{
label: "地址",
prop: "address",
width: 400
},
{
label: "郵編",
prop: "zip",
width: 120
},
{
label: "操作",
width: 120,
fixed: 'right',
render: (row, column, index)=>{
return <span><Button type="text" size="small" onClick={this.deleteRow.bind(this, index)}>移除</Button></span>
}
}
],
data: [{
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀區(qū)',
address: '上海市普陀區(qū)金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀區(qū)',
address: '上海市普陀區(qū)金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀區(qū)',
address: '上海市普陀區(qū)金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀區(qū)',
address: '上海市普陀區(qū)金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀區(qū)',
address: '上海市普陀區(qū)金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀區(qū)',
address: '上海市普陀區(qū)金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀區(qū)',
address: '上海市普陀區(qū)金沙江路 1518 弄',
zip: 200333
}]
}
}
deleteRow(index) {
const { data } = this.state;
data.splice(index, 1);
this.setState({
data: [...data]
})
}
render() {
return (
<Table
style={{width: '100%'}}
columns={this.state.columns}
data={this.state.data}
border={true}
maxHeight={250}
/>
)
}多級表頭
數(shù)據(jù)結(jié)構(gòu)比較復(fù)雜的時候，可使用多級表頭來展現(xiàn)數(shù)據(jù)的層次關(guān)系。
constructor(props) {
super(props);
this.state = {
columns: [
{
label: "日期",
prop: "date",
width: 150
},
{
label: "配送信息",
subColumns: [
{
label: "姓名",
prop: "name",
width: 160
},
{
label: "地址",
subColumns: [
{
label: "省份",
prop: "province",
width: 160
},
{
label: "城市",
prop: "address",
width: 400
},
{
label: "郵編",
prop: "zip",
width: 120
}
]
}
]
}
],
data: [{
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀區(qū)',
address: '上海市普陀區(qū)金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀區(qū)',
address: '上海市普陀區(qū)金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀區(qū)',
address: '上海市普陀區(qū)金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀區(qū)',
address: '上海市普陀區(qū)金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀區(qū)',
address: '上海市普陀區(qū)金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀區(qū)',
address: '上海市普陀區(qū)金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀區(qū)',
address: '上海市普陀區(qū)金沙江路 1518 弄',
zip: 200333
}]
}
}
render() {
return (
<Table
style={{width: '100%'}}
columns={this.state.columns}
data={this.state.data}
border={true}
/>
)
}自定義列模板
自定義列的顯示內(nèi)容，可組合其他組件使用
通過設(shè)置列的render屬性，可以自定義渲染內(nèi)容
constructor(props) {
super(props);
this.state = {
columns: [
{
type: 'index'
},
{
label: "日期",
prop: "date",
width: 150,
render: function(data){
return (
<span>
<Icon name="time"/>
<span style={{marginLeft: '10px'}}>{data.date}</span>
</span>)
}
},
{
label: "姓名",
prop: "name",
width: 160,
render: function(data){
return <Tag>{data.name}</Tag>
}
},
{
label: "操作",
prop: "address",
render: function(){
return (
<span>
<Button plain={true} type="info" size="small">編輯</Button>
<Button type="danger" size="small">刪除</Button>
</span>
)
}
}
],
data: [{
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀區(qū)',
address: '上海市普陀區(qū)金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀區(qū)',
address: '上海市普陀區(qū)金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀區(qū)',
address: '上海市普陀區(qū)金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀區(qū)',
address: '上海市普陀區(qū)金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀區(qū)',
address: '上海市普陀區(qū)金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀區(qū)',
address: '上海市普陀區(qū)金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀區(qū)',
address: '上海市普陀區(qū)金沙江路 1518 弄',
zip: 200333
}]
}
}
render() {
return (
<Table
style={{width: '100%'}}
columns={this.state.columns}
data={this.state.data}
border={true}
height={250}
highlightCurrentRow={true}
onCurrentChange={item=>{console.log(item)}}
/>
)
}展開行
當(dāng)行內(nèi)容過多并且不想顯示橫向滾動條時，可以使用 Table 展開行功能。
通過設(shè)置 type="expand" 和 expandPannel 可以開啟展開行功能, expandPannel 的返回值會被渲染為展開行的內(nèi)容
constructor(props) {
super(props);
this.state = {
columns: [
{
type: 'expand',
expandPannel: function(data){
return (
<Form labelPosition="left" inline={true} className="demo-table-expand">
<Form.Item label="商品名稱"><span>好滋好味雞蛋仔</span></Form.Item>
<Form.Item label="所屬店鋪"><span>王小虎夫妻店</span></Form.Item>
<Form.Item label="商品 ID"><span>12987122</span></Form.Item>
<Form.Item label="店鋪 ID"><span>10333</span></Form.Item>
<Form.Item label="商品分類"><span>江浙小吃、小吃零食</span></Form.Item>
<Form.Item label="店鋪地址"><span>上海市普陀區(qū)真北路</span></Form.Item>
<Form.Item label="商品描述"><span>荷蘭優(yōu)質(zhì)淡奶，奶香濃而不膩</span></Form.Item>
</Form>
)
}
},
{
label: "商品 ID",
prop: "id",
width: 150
},
{
label: "商品名稱",
prop: "name",
width: 160
},
{
label: "描述",
prop: "desc"
}
],
data: [{
id: '12987122',
name: '好滋好味雞蛋仔',
category: '江浙小吃、小吃零食',
desc: '荷蘭優(yōu)質(zhì)淡奶，奶香濃而不膩',
address: '上海市普陀區(qū)真北路',
shop: '王小虎夫妻店',
shopId: '10333'
}, {
id: '12987123',
name: '好滋好味雞蛋仔',
category: '江浙小吃、小吃零食',
desc: '荷蘭優(yōu)質(zhì)淡奶，奶香濃而不膩',
address: '上海市普陀區(qū)真北路',
shop: '王小虎夫妻店',
shopId: '10333'
}, {
id: '12987125',
name: '好滋好味雞蛋仔',
category: '江浙小吃、小吃零食',
desc: '荷蘭優(yōu)質(zhì)淡奶，奶香濃而不膩',
address: '上海市普陀區(qū)真北路',
shop: '王小虎夫妻店',
shopId: '10333'
}, {
id: '12987126',
name: '好滋好味雞蛋仔',
category: '江浙小吃、小吃零食',
desc: '荷蘭優(yōu)質(zhì)淡奶，奶香濃而不膩',
address: '上海市普陀區(qū)真北路',
shop: '王小虎夫妻店',
shopId: '10333'
}]
}
}
render() {
return (
<Table
style={{width: '100%'}}
columns={this.state.columns}
data={this.state.data}
border={false}
onCurrentChange={item=>{console.log(item)}}
/>
)
}單選
選擇單行數(shù)據(jù)時使用色塊表示
Table 組件提供了單選的支持，只需要配置highlightCurrentRow屬性即可實現(xiàn)單選。之后由currentChange事件來管理選中時觸發(fā)的事件，它會傳入currentRow，oldCurrentRow。如果需要顯示索引，可以增加一列column，設(shè)置type屬性為index即可顯示從 1 開始的索引號。
constructor(props) {
super(props);
this.state = {
columns: [
{
type: 'index'
},
{
label: "日期",
prop: "date",
width: 150
},
{
label: "姓名",
prop: "name",
width: 160
},
{
label: "地址",
prop: "address"
}
],
data: [{
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀區(qū)',
address: '上海市普陀區(qū)金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀區(qū)',
address: '上海市普陀區(qū)金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀區(qū)',
address: '上海市普陀區(qū)金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀區(qū)',
address: '上海市普陀區(qū)金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀區(qū)',
address: '上海市普陀區(qū)金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀區(qū)',
address: '上海市普陀區(qū)金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀區(qū)',
address: '上海市普陀區(qū)金沙江路 1518 弄',
zip: 200333
}]
}
}
render() {
return (
<Table
style={{width: '100%'}}
columns={this.state.columns}
data={this.state.data}
border={true}
height={250}
highlightCurrentRow={true}
onCurrentChange={item=>{console.log(item)}}
/>
)
}多選
選擇多行數(shù)據(jù)時使用 Checkbox。
實現(xiàn)多選非常簡單: 手動添加一個column，設(shè)type屬性為selection即可。
constructor(props) {
super(props);
this.state = {
columns: [
{
type: 'selection'
},
{
label: "日期",
prop: "date",
width: 150
},
{
label: "姓名",
prop: "name",
width: 160
},
{
label: "地址",
prop: "address"
}
],
data: [{
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀區(qū)',
address: '上海市普陀區(qū)金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀區(qū)',
address: '上海市普陀區(qū)金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀區(qū)',
address: '上海市普陀區(qū)金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀區(qū)',
address: '上海市普陀區(qū)金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀區(qū)',
address: '上海市普陀區(qū)金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀區(qū)',
address: '上海市普陀區(qū)金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀區(qū)',
address: '上海市普陀區(qū)金沙江路 1518 弄',
zip: 200333
}]
}
}
render() {
return (
<Table
style={{width: '100%'}}
columns={this.state.columns}
data={this.state.data}
border={true}
height={250}
onSelectChange={(selection) => { console.log(selection) }}
onSelectAll={(selection) => { console.log(selection) }}
/>
)
}排序
對表格進(jìn)行排序，可快速查找或?qū)Ρ葦?shù)據(jù)。
在列中設(shè)置sortable屬性即可實現(xiàn)以該列為基準(zhǔn)的排序，接受一個Boolean，默認(rèn)為false。
constructor(props) {
super(props);
this.state = {
columns: [
{
label: "日期",
prop: "date",
width: 180,
sortable: true
},
{
label: "姓名",
prop: "name",
width: 180,
sortable: 'custom'
},
{
label: "地址",
prop: "address"
}
],
data: [{
date: '2016-05-02',
name: '趙小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '錢小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '孫小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄'
}, {
date: '2016-05-03',
name: '李小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄'
}]
}
}
handleSort(data){
console.log('自定義');
console.log(data.column);
console.log(data.prop);
console.log(data.order);
}
render() {
return (
<Table
style={{width: '100%'}}
columns={this.state.columns}
data={this.state.data}
border={true}
onSortChange={this.handleSort.bind(this)}
/>
)
}篩選
對表格進(jìn)行篩選，可快速查找到自己想看的數(shù)據(jù)。
在列中設(shè)置filters filterMethod屬性即可開啟該列的篩選，filters 是一個數(shù)組，filterMethod是一個方法，它用于決定某些數(shù)據(jù)是否顯示，會傳入兩個參數(shù)：value和row。
constructor(props) {
super(props);
this.state = {
columns: [
{
label: "日期",
prop: "date",
width: 180
},
{
label: "姓名",
prop: "name",
width: 180
},
{
label: "地址",
prop: "address"
},
{
label: '標(biāo)簽',
prop: 'tag',
width: 100,
filters: [{text: '家', value: '家'}, {text: '公司', value: '公司'}],
filterMethod(value, row) {
return row.tag === value;
},
render: (data, column)=>{
if(data['tag'] == '家'){
return <Tag type="primary">{data['tag']}</Tag>
}else if(data['tag'] == '公司'){
return <Tag type="success">{data['tag']}</Tag>
}
}
}
],
data: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄',
tag: '家'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1517 弄',
tag: '公司'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1519 弄',
tag: '公司'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1516 弄',
tag: '家'
}]
}
}
render() {
return (
<Table
style={{width: '100%'}}
columns={this.state.columns}
data={this.state.data}
border={true}
/>
)
}表尾合計行
若表格展示的是各類數(shù)字，可以在表尾顯示各列的合計。
將showSummary設(shè)置為true就會在表格尾部展示合計行。默認(rèn)情況下，對于合計行，第一列不進(jìn)行數(shù)據(jù)求合操作，而是顯示「合計」二字（可通過sumText配置），其余列會將本列所有數(shù)值進(jìn)行求合操作，并顯示出來。當(dāng)然，你也可以定義自己的合計邏輯。使用summaryMethod并傳入一個方法，返回一個數(shù)組，這個數(shù)組中的各項就會顯示在合計行的各列中，具體可以參考本例中的第二個表格。
constructor(props) {
super(props);
this.state = {
columns: [
{
label: "ID",
prop: "id",
width: 180
},
{
label: "姓名",
prop: "name",
width: 180
},
{
label: "數(shù)值 1",
prop: "amount1"
},
{
label: "數(shù)值 2",
prop: "amount2"
},
{
label: "數(shù)值 3",
prop: "amount3"
}
],
data: [{
id: '12987122',
name: '王小虎',
amount1: '234',
amount2: '3.2',
amount3: 10
}, {
id: '12987123',
name: '王小虎',
amount1: '165',
amount2: '4.43',
amount3: 12
}, {
id: '12987124',
name: '王小虎',
amount1: '324',
amount2: '1.9',
amount3: 9
}, {
id: '12987125',
name: '王小虎',
amount1: '621',
amount2: '2.2',
amount3: 17
}, {
id: '12987126',
name: '王小虎',
amount1: '539',
amount2: '4.1',
amount3: 15
}]
}
}
render() {
return (
<div>
<Table
style={{width: '100%'}}
showSummary={true}
columns={this.state.columns}
data={this.state.data}
border={true}
/>
<Table
style={{width: '100%', marginTop: 20}}
height={200}
showSummary={true}
columns={this.state.columns}
data={this.state.data}
sumText='總價'
summaryMethod={(columns, data)=>{
const dataList = [];
for(var i=0; i < columns.length; i++){
let total = 0;
for(let j=0; j < data.length; j++){
let value = data[j][columns[i]['property']];
if(isNaN(value)){
total = 'N/A'
break;
}else{
total += parseFloat(value);
}
}
dataList[i] = isNaN(total) ? total : total +'元';
}
return dataList;
}}
border={true}
/>
</div>
)
}Table Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|---|---|---|---|---|
| data | 顯示的數(shù)據(jù) | array | — | — |
| height | table 的高度，默認(rèn)高度為空，即自動高度，單位 px | string, number | — | — |
| maxHeight | Table 的最大高度 | string/number | — | — |
| stripe | 是否為斑馬紋 table | boolean | — | false |
| border | 是否帶有縱向邊框 | boolean | — | false |
| fit | 列的寬度是否自撐開 | boolean | — | true |
| showHeader | 是否顯示表頭 | boolean | — | true |
| highlightCurrentRow | 是否要高亮當(dāng)前行 | boolean | — | false |
| currentRowKey | 當(dāng)前選中行的 key，傳入數(shù)組時可以控制多選 | string, number, string[], number[] | — | — |
| rowClassName | 行的 className 的回調(diào)。 | Function(row, index) | - | - |
| rowStyle | 行的 style 的回調(diào)方法，也可以使用一個固定的 Object 為所有行設(shè)置一樣的 Style。 | Function(row, index)/Object | — | — |
| rowKey | 行數(shù)據(jù)的 Key，用來優(yōu)化 Table 的渲染；在使用 reserveSelection 功能的情況下，該屬性是必填的。類型為 string 時，支持多層訪問：user.info.id，但不支持 user.info[0].id，此種情況請使用 Function。 |
Function(row)/string | — | — |
| emptyText | 空數(shù)據(jù)時顯示的文本內(nèi)容 | string | - | - |
| defaultExpandAll | 是否默認(rèn)展開所有行，當(dāng) Table 中存在 type="expand" 的 Column 的時候有效 | boolean | — | false |
| expandRowKeys | 可以通過該屬性設(shè)置 Table 目前的展開行，需要設(shè)置 row-key 屬性才能使用，該屬性為展開行的 keys 數(shù)組。 | array | — | |
| defaultSort | 默認(rèn)的排序列的prop和順序。它的prop屬性指定默認(rèn)的排序的列，order指定默認(rèn)排序的順序 |
Object | order: ascending, descending |
如果只指定了prop, 沒有指定order, 則默認(rèn)順序是ascending |
| showSummary | 是否在表尾顯示合計行 | boolean | - | false |
| sumText | 合計行第一列的文本 | string | - | 合計 |
| summeryMethod | 自定義的合計計算方法 | Function({ columns, data }) | - | - |
Table Events
| 事件名 | 說明 | 參數(shù) |
|---|---|---|
| onSelect | 當(dāng)用戶手動勾選數(shù)據(jù)行的 Checkbox 時觸發(fā)的事件 | selection, row |
| onSelectAll | 當(dāng)用戶手動勾選全選 Checkbox 時觸發(fā)的事件 | selection |
| onSelectChange | 當(dāng)選擇項發(fā)生變化時會觸發(fā)該事件 | selection |
| onCellMouseEnter | 當(dāng)單元格 hover 進(jìn)入時會觸發(fā)該事件 | row, column, cell, event |
| onCellMouseLeave | 當(dāng)單元格 hover 退出時會觸發(fā)該事件 | row, column, cell, event |
| onCellClick | 當(dāng)某個單元格被點擊時會觸發(fā)該事件 | row, column, cell, event |
| onCellDbClick | 當(dāng)某個單元格被雙擊擊時會觸發(fā)該事件 | row, column, cell, event |
| onRowClick | 當(dāng)某一行被點擊時會觸發(fā)該事件 | row, event, column |
| onRowContextMenu | 當(dāng)某一行被鼠標(biāo)右鍵點擊時會觸發(fā)該事件 | row, event |
| onRowDbClick | 當(dāng)某一行被雙擊時會觸發(fā)該事件 | row, event |
| onHeaderClick | 當(dāng)某一列的表頭被點擊時會觸發(fā)該事件 | column, event |
| onSortChange | 當(dāng)表格的排序條件發(fā)生變化的時候會觸發(fā)該事件 | { column, prop, order } |
| onFilterChange | 當(dāng)表格的篩選條件發(fā)生變化的時候會觸發(fā)該事件，參數(shù)的值是一個對象，對象的 key 是 column 的 columnKey，對應(yīng)的 value 為用戶選擇的篩選條件的數(shù)組。 | filters |
| onCurrentChange | 當(dāng)表格的當(dāng)前行發(fā)生變化的時候會觸發(fā)該事件，如果要高亮當(dāng)前行，請打開表格的 highlight-current-row 屬性 | currentRow, oldCurrentRow |
| onHeaderDragEnd | 當(dāng)拖動表頭改變了列的寬度的時候會觸發(fā)該事件 | newWidth, oldWidth, column, event |
| onExpand | 當(dāng)用戶對某一行展開或者關(guān)閉的上會觸發(fā)該事件 | row, expanded |
Table Methods
| 方法名 | 說明 | 參數(shù) |
|---|---|---|
| clearSelection | 清空用戶的選擇，當(dāng)使用 reserve-selection 功能的時候，可能會需要使用此方法 | selection |
| toggleRowSelection | 用于多選表格，切換某一行的選中狀態(tài)，如果使用了第二個參數(shù)，則是設(shè)置這一行選中與否（selected 為 true 則選中） | row, selected |
| setCurrentRow | 用于單選表格，設(shè)定某一行為選中行，如果調(diào)用時不加參數(shù)，則會取消目前高亮行的選中狀態(tài)。 | row |
Table-column Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認(rèn)值 |
|---|---|---|---|---|
| type | 對應(yīng)列的類型。如果設(shè)置了 selection 則顯示多選框；如果設(shè)置了 index 則顯示該行的索引（從 1 開始計算）；如果設(shè)置了 expand 則顯示為一個可展開的按鈕 |
string | selection/index/expand | — |
| columnKey | column 的 key，如果需要使用 onFilterChange 事件，則需要此屬性標(biāo)識是哪個 column 的篩選條件 | string | — | — |
| label | 顯示的標(biāo)題 | string | — | — |
| prop | 對應(yīng)列內(nèi)容的字段名，也可以使用 property 屬性 | string | — | — |
| width | 對應(yīng)列的寬度 | string | — | — |
| minWidth | 對應(yīng)列的最小寬度，與 width 的區(qū)別是 width 是固定的，min-width 會把剩余寬度按比例分配給設(shè)置了 min-width 的列 | string | — | — |
| fixed | 列是否固定在左側(cè)或者右側(cè)，true 表示固定在左側(cè) | string, boolean | true, left, right | - |
| render | 自定義渲染使用的 Function | Function(row, column, index) | — | — |
| renderHeader | 列標(biāo)題 Label 區(qū)域渲染使用的 Function | Function(column) | — | — |
| sortable | 對應(yīng)列是否可以排序，如果設(shè)置為 'custom'，則代表用戶希望遠(yuǎn)程排序，需要監(jiān)聽 Table 的 sort-change 事件 | boolean, string | true, false, 'custom' | false |
| sortMethod | 對數(shù)據(jù)進(jìn)行排序的時候使用的方法，僅當(dāng) sortable 設(shè)置為 true 的時候有效 | Function(a, b) | - | - |
| resizable | 對應(yīng)列是否可以通過拖動改變寬度（如果需要在 el-table 上設(shè)置 border 屬性為真） | boolean | — | true |
| align | 對齊方式 | string | left, center, right | left |
| headerAlign | 表頭對齊方式，若不設(shè)置該項，則使用表格的對齊方式 | string | left/center/right | — |
| className | 列的 className | string | — | — |
| labelClassName | 當(dāng)前列標(biāo)題的自定義類名 | string | — | — |
| selectable | 僅對 type=selection 的列有效，類型為 Function，F(xiàn)unction 的返回值用來決定這一行的 CheckBox 是否可以勾選 | Function(row, index) | — | — |
| reserveSelection | 僅對 type=selection 的列有效，類型為 Boolean，為 true 則代表會保留之前數(shù)據(jù)的選項，需要配合 Table 的 clearSelection 方法使用。 | Boolean | — | false |
| filters | 數(shù)據(jù)過濾的選項，數(shù)組格式，數(shù)組中的元素需要有 text 和 value 屬性。 | Array[{ text, value }] | — | — |
| filterPlacement | 過濾彈出框的定位 | string | 與 Tooltip 的 placement 屬性相同 |
— |
| filterMultiple | 數(shù)據(jù)過濾的選項是否多選 | Boolean | — | true |
| filterMethod | 數(shù)據(jù)過濾使用的方法，如果是多選的篩選項，對每一條數(shù)據(jù)會執(zhí)行多次，任意一次返回 true 就會顯示。 | Function(value, row) | — | — |
| filteredValue | 選中的數(shù)據(jù)過濾項，如果需要自定義表頭過濾的渲染方式，可能會需要此屬性。 | Array | — | — |
以上內(nèi)容是否對您有幫助：
更多建議：