Vue中的vxe-table教程18-工具欄新增、刪除、儲存、列顯示與隱藏
阿新 • • 發佈：2021-01-15
技術標籤：vxe-table
效果圖：
1. index.html程式碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://cdn.jsdelivr.net/npm/xe-utils"></script> <script src="https://cdn.jsdelivr.net/npm/vxe-table"></script> <!-- 使用圖示需引入圖示對應的css檔案即可使用--> <!-- 下載地址：http://www.fontawesome.com.cn/--> <link rel="stylesheet" href="./css/font-awesome.css"> <!-- 使用 cdn 引用方式需要注意是否鎖定版本，預設指向最新版本 --> </head> <body> <div id="app"> <template> <div style="padding: 20px 50px 0 50px"> <vxe-toolbar perfect> <template v-slot:buttons> <vxe-button type="text" icon="fa fa-plus" content="新增"></vxe-button> <vxe-button type="text" icon="fa fa-trash-o" content="刪除"></vxe-button> <vxe-button type="text" icon="fa fa-save" content="儲存"></vxe-button> </template> </vxe-toolbar> <vxe-toolbar perfect> <template v-slot:buttons> <vxe-button icon="fa fa-plus" status="perfect" content="新增"></vxe-button> <vxe-button icon="fa fa-trash-o" status="perfect" content="刪除"></vxe-button> <vxe-button icon="fa fa-save" status="perfect" content="儲存"></vxe-button> </template> </vxe-toolbar> <!-- 此處設定了列顯示與隱藏的按鈕--> <vxe-toolbar custom></vxe-toolbar> <vxe-table ref="xTable" :data="tableData"> <vxe-table-column field="name" title="Name"></vxe-table-column> <vxe-table-column field="role" title="Role"></vxe-table-column> <vxe-table-column field="sex" title="Sex"></vxe-table-column> </vxe-table> </div> </template> </div> </body> <script src="./js/main.js"></script> <link rel="stylesheet" href="./css/main.css"> </html>
2. main.css程式碼
@import url("https://cdn.jsdelivr.net/npm/vxe-table/lib/style.css");
.vxe-textarea--inner {
line-height: inherit;
}
3. main.js程式碼
var Main = { data() { return { loading: false, tableData: [ {name: 'Test1', role: '前端', sex: '男'}, {name: 'Test2', role: '後端', sex: '男'}, {name: 'Test3', role: '測試', sex: '男'}, {name: 'Test4', role: '設計師', sex: '女'} ] } }, created() { }, methods: { } }; var app = new Vue(Main).$mount('#app');