Vue組件庫Element-常見組件表格示例代碼

更新時間：2023年10月16日 15:27:10 作者：保持敬畏

對于Element組件的使用,最主要的就是明確自己想要達到的效果,從官網(wǎng)中將對應代碼復制粘貼即可,最重要的是要讀懂不同組件官網(wǎng)中提供的文檔,以便實現(xiàn)自己想要的效果,本文給大家介紹Vue組件庫Element-常見組件表格,感興趣的朋友一起看看吧

對于Element組件的使用，最主要的就是明確自己想要達到的效果，從官網(wǎng)中將對應代碼復制粘貼即可，最重要的是要讀懂不同組件官網(wǎng)中提供的文檔，以便實現(xiàn)自己想要的效果

常見組件-表格

Table：表格：用于展示多條結構類似的數(shù)據(jù)，可以對數(shù)據(jù)進行排序、篩選、對比或其他自定義操作

具體示例關鍵代碼代碼如下:（注釋很重要）

<template>
    <div>
        <!-- Table表格 -->
        <!-- :data 表示通過v-bind綁定的一個數(shù)據(jù)模型data -->
        <!-- :為v-bind的簡寫 -->
        <!-- data="tableData"表示整個表格的所有數(shù)據(jù)來源 -->
        <el-table :data="tableData" border style="width: 100%">
            <!-- prop表示該列展示對象中哪一個屬性 -->
            <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>

具體運行結果為：