您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“vue之左二級(jí)菜單右表單表格怎么實(shí)現(xiàn)”的有關(guān)知識(shí),在實(shí)際案例的操作過程中,不少人都會(huì)遇到這樣的困境,接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
實(shí)現(xiàn)效果:
實(shí)現(xiàn)代碼:
<template> <div class="app-container"> <el-row :gutter="20"> <!--服務(wù)名稱--> <el-col :span="4" :xs="24"> <div class="head-container"> <el-input placeholder="請(qǐng)輸入服務(wù)名稱" clearable size="small" prefix-icon="el-icon-search" /> </div> <div class="head-container"> <el-tree :data="consulServices" :expand-on-click-node="false" ref="tree" @node-click="handleNodeClick" default-expand-all /> </div> </el-col> <!--服務(wù)實(shí)例--> <el-col :span="20" :xs="24"> <el-form :inline="true"> <el-form-item label="服務(wù)名稱" prop="roleName"> <el-input placeholder="請(qǐng)輸入服務(wù)名稱" clearable size="small" /> </el-form-item> <el-form-item label="權(quán)限字符" prop="roleKey"> <el-input placeholder="請(qǐng)輸入權(quán)限字符" clearable size="small" /> </el-form-item> <el-form-item label="角色狀態(tài)" prop="status"> <el-select placeholder="角色狀態(tài)" clearable size="small" value="" > <el-option v-for="dict in roleType" :key="dict.value" :label="dict.label" :value="dict.value" /> </el-select> </el-form-item> <el-form-item label="創(chuàng)建時(shí)間"> <el-date-picker size="small" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="開始日期" end-placeholder="結(jié)束日期" ></el-date-picker> </el-form-item> <el-form-item> <el-button type="primary" icon="el-icon-search" size="small" >搜索</el-button > <el-button icon="el-icon-refresh" size="small">重置</el-button> </el-form-item> </el-form> <el-row :gutter="10" class="mb8"> <el-col :span="1.5"> <el-button type="primary" plain icon="el-icon-plus" size="mini" >新增</el-button > </el-col> <el-col :span="1.5"> <el-button type="success" plain icon="el-icon-edit" size="mini" >修改</el-button > </el-col> <el-col :span="1.5"> <el-button type="danger" plain icon="el-icon-delete" size="mini" >刪除</el-button > </el-col> <el-col :span="1.5"> <el-button type="warning" plain icon="el-icon-download" size="mini" >導(dǎo)出</el-button > </el-col> </el-row> <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" :header-cell- @selection-change="handleSelectionChange" > <el-table-column type="selection" width="55" align="center"> </el-table-column> <el-table-column label="日期" width="120"> <template slot-scope="scope">{{ scope.row.date }}</template> </el-table-column> <el-table-column prop="name" label="姓名" width="120"> </el-table-column> <el-table-column prop="address" label="地址" show-overflow-tooltip> </el-table-column> <el-table-column prop="tag" label="標(biāo)簽" width="100"> <template slot-scope="scope"> <el-tag :type="scope.row.tag === '家' ? 'primary' : 'success'" disable-transitions >{{ scope.row.tag }}</el-tag > </template> </el-table-column> </el-table> </el-col> </el-row> </div> </template> <script> export default { name: "ConsulManager", methods: { handleSelectionChange(val) { this.multipleSelection = val; }, // 節(jié)點(diǎn)單擊事件 handleNodeClick(data) { console.log(data); this.$message({ message: data.label, type: "success", }); }, }, data() { return { roleType: [ { label: "正常", value: 1, }, { label: "停用", value: 2, }, ], consulServices: [ { id: "1", label: "tnblog.login" }, { id: "2", label: "tnblog.img" }, { id: "3", label: "tnblog.user" }, { id: "4", label: "tnblog.cache" }, { id: "5", label: "tnblog.admin" }, ], tableData: [ { date: "2017-05-01", name: "杜小虎", address: "上海市普陀區(qū)金沙江路 1518 弄", tag: "家", }, { date: "2017-05-01", name: "杜小虎", address: "上海市普陀區(qū)金沙江路 1517 弄", tag: "公司", }, { date: "2017-05-01", name: "杜小虎", address: "上海市普陀區(qū)金沙江路 1519 弄", tag: "家", }, { date: "2017-05-01", name: "杜小虎", address: "上海市普陀區(qū)金沙江路 1516 弄", tag: "公司", }, ], multipleSelection: [], }; }, }; </script>
“vue之左二級(jí)菜單右表單表格怎么實(shí)現(xiàn)”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。