一、前言

CRUD
自從使用了 vue2.x，就不想過多地去使用其他的含 JS 程式碼的前端框架如 BootStrap4、jQuery 等，想全程使用 vue 去搭建前端介面，因為 vue 的生態系統十分繁榮，ui 方面的庫有 element-ui、iview 等。

這次①使用了vue搭建前端頁面架構，繫結資料，②使用element-ui修飾介面。

二、搭建專案架構

三、程式碼編寫

只需要將 App.vue修改為如下的內容即可

<template>
    <div id="app">
        <!--導航條-->
        <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                 background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
            <el-menu-item index="1">處理中心</el-menu-item>
            <el-submenu index="2">
                <template slot="title">我的工作臺</template>
                <el-menu-item index="2-1">選項1</el-menu-item>
                <el-menu-item index="2-2">選項2</el-menu-item>
                <el-menu-item index="2-3">選項3</el-menu-item>
            </el-submenu>
            <el-menu-item index="3"><a href="https://www.ele.me" target="_blank">關於我們</a></el-menu-item>
        </el-menu>
        <br>
        <!--搜尋框-->
        <el-row>
            <el-col :span="3" class="grid">
                <el-input v-model="input" placeholder="請輸入內容" size="mini"></el-input>
            </el-col>
            <el-col :span="1" class="grid">
                <el-button type="success" icon="el-icon-search" size="mini">搜尋</el-button>
            </el-col>
        </el-row>
        <br>
        <!--表格資料及操作-->
        <el-table :data="tableData" border style="width: 100%" stripe ref="multipleTable" tooltip-effect="dark">
            <!--勾選框-->
            <el-table-column type="selection" width="55">
            </el-table-column>
            <!--索引-->
            <el-table-column type="index" :index="indexMethod">
            </el-table-column>
            <el-table-column prop="date" label="日期" width="180" sortable>
            </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-column label="編輯" width="100">
                <template slot-scope="scope">
                    <el-button type="primary" icon="el-icon-edit" size="mini">編輯</el-button>
                </template>
            </el-table-column>
            <el-table-column label="刪除" width="100">
                <template slot-scope="scope">
                    <el-button type="danger" icon="el-icon-delete" size="mini">刪除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <br>
        <!--新增按鈕-->
        <el-col :span="1" class="grid">
            <el-button type="success" icon="el-icon-circle-plus-outline" size="mini" round>新增</el-button>
        </el-col>
        <!--全刪按鈕-->
        <el-col :span="1" class="grid">
            <el-button type="danger" icon="el-icon-delete" size="mini" round>全刪</el-button>
        </el-col>
        <br>
        <!--分頁條-->
        <el-pagination background layout="prev, pager, next" :total="1000">
        </el-pagination>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                //表格資料
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀區金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀區金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀區金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀區金沙江路 1516 弄'
                }],
                //查詢輸入框資料
                input: '',
                //導航條預設選項
                activeIndex: '1',
                activeIndex2: '1'
            }
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            indexMethod(index) {
                return index;
            }
        }
    }
</script>
<style>
    #app {
        font-family: Helvetica, sans-serif;
        text-align: center;
    }
</style>

 

是不是覺得很簡單？

四、小結

1、具體怎麼使用 element-ui，搭建引入element-ui，可以檢視 element-ui 官方文件

2、上述頁面程式碼雖簡單，但還需優化，主要是還沒編寫前後端互動程式碼。

五、拓展