業(yè)務(wù)場(chǎng)景：表格展示數(shù)據(jù)較多，在有限的空間展示過(guò)多的數(shù)據(jù)
解決：使用表格固定列（固定列之所以能固定，是因?yàn)樯闪?個(gè)表格点寥，一個(gè)用來(lái)固定，一個(gè)用來(lái)滾動(dòng)）来吩，
按照文檔介紹固定列需要使用fixed屬性敢辩，它接受 Boolean 值或者leftright，表示左邊固定還是右邊固定弟疆。
遇到問(wèn)題：在業(yè)務(wù)開(kāi)發(fā)中沒(méi)有合理的設(shè)置width戚长，導(dǎo)致數(shù)據(jù)表格擁擠，最終給每個(gè)列加上寬解決兽间，滿足開(kāi)發(fā)需求历葛。
<template>
<el-table
:data="tableData"
border
style="width: 100%">
<el-table-column
fixed
prop="date"
label="日期"
width="150">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="120">
</el-table-column>
<el-table-column
prop="province"
label="省份"
width="120">
</el-table-column>
<el-table-column
prop="city"
label="市區(qū)"
width="120">
</el-table-column>
<el-table-column
prop="address"
label="地址"
width="300">
</el-table-column>
<el-table-column
prop="zip"
label="郵編"
width="120">
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="100">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
<el-button type="text" size="small">編輯</el-button>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
methods: {
handleClick(row) {
console.log(row);
}
},
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀區(qū)',
address: '上海市普陀區(qū)金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-04',
name: '王小虎',
province: '上海',
city: '普陀區(qū)',
address: '上海市普陀區(qū)金沙江路 1517 弄',
zip: 200333
}, {
date: '2016-05-01',
name: '王小虎',
province: '上海',
city: '普陀區(qū)',
address: '上海市普陀區(qū)金沙江路 1519 弄',
zip: 200333
}, {
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀區(qū)',
address: '上海市普陀區(qū)金沙江路 1516 弄',
zip: 200333
}]
}
}
}
</script>
