對(duì)于Element組件的使用，最主要的就是明確自己想要達(dá)到的效果，從官網(wǎng)中將對(duì)應(yīng)代碼復(fù)制粘貼即可，最重要的是要讀懂不同組件官網(wǎng)中提供的文檔，以便實(shí)現(xiàn)自己想要的效果
常見組件-表格
- Table：表格：用于展示多條結(jié)構(gòu)類似的數(shù)據(jù)，可以對(duì)數(shù)據(jù)進(jìn)行排序、篩選、對(duì)比或其他自定義操作
具體示例關(guān)鍵代碼代碼如下:（注釋很重要）
<template>
<div>
<!-- Table表格 -->
<!-- :data 表示通過v-bind綁定的一個(gè)數(shù)據(jù)模型data -->
<!-- :為v-bind的簡(jiǎn)寫 -->
<!-- data="tableData"表示整個(gè)表格的所有數(shù)據(jù)來(lái)源 -->
<el-table :data="tableData" border style="width: 100%">
<!-- prop表示該列展示對(duì)象中哪一個(gè)屬性 -->
<el-table-column prop="date" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [{
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-03',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1516 弄'
}]
}
}
}
</script>
<style></style>?具體運(yùn)行結(jié)果為：
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-537884.html
?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-537884.html
到了這里，關(guān)于Vue組件庫(kù)Element-常見組件-表格的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
