vue+elementui纯表格页⾯（左右结构布局，构成：表格和弹窗组件、左边⽬
录）
⽗页⾯（左右结构布局，构成：表格和弹窗组件、左边⽬录）
<template>
<div >
<div class="leftshuxing">
<left-list @cliitem="handleitem" @reload="reload" class="leftlist"></left-list>
</div>
<div class="rightdrig">
<div class="gr-datagrid-notitle">
<data-grid ref="dataGrid" @editFun="editFun" @deleteFun="deleteFun" @addFun="addFun" />
</div>
<gr-dialog :dialogVisible.sync="dialogVisible" :dialogOptions="dialogOptions" :dialogContentComponent="dialogContentComponent" :data="dialogData" :show="show" />
</div>
</div>
</template>
<script>
import dataGrid from '@/components/grid/zzqx-gn/index.vue'
import grDialog from '@/components/common/dialog/index.vue'
import leftList from '@/components/grid/zzqx-gn/leftList.vue'
import { mapState } from 'vuex'
export default {
data() {
return {
dialogOptions: {},
dialogVisible: false,
dialogContentComponent: null,
dialogData: {},
show: true
}
},
components: {
dataGrid,
grDialog,
leftList
},
computed: mapState(['chooseId', 'chooseData']),
methods: {
reload(prame) {
this.$refs.dataGrid.load(prame)
},
addFun(data) {
this.show = true
this.dialogVisible = true
this.dialogOptions = {
width: '700px',
title: '增加功能',
saveBtn: '提交'
}
this.dialogContentComponent = () =>
import('@/components/dialog/zzqx-gn/add-gn.vue')
},
editFun() {
if (this.chooseData.length !== 1) {
this.$message.warning('请选择⼀个功能菜单后操作')
return
}
this.data = this.chooseData[0]
this.show = true
this.dialogVisible = true
this.dialogOptions = {
width: '700px',
title: '修改功能',
saveBtn: '提交'
}
this.dialogContentComponent = () =>
import('@/components/dialog/zzqx-gn/edit-gn.vue')
},
deleteFun(node, data) {
if (!this.chooseData.length) {
this.$message({
message: '请选择数据进⾏操作',
type: 'warning'
})
return
}
var prame = []
this.chooseData.forEach((element) => {
react tooptip组件prame.push({ dxid: element.dxid })
})
this.$confirm('是否确定删除该数据?', '提⽰', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
center: true
})
.then(() => {
// 删除
this.api.post(
this,
'delete_gn',
() => {
this.$message.success('删除成功')
this.dialogVisible = false // 关闭弹窗
},
prame
)
})
.
catch(() => {
this.$message({
message: '已取消删除'
})
})
},
handleitem(val) {
this.$refs.dataGrid.load({ dxid: val.dxid })
}
}
}
</script>
<style lang="scss">
.general-wrap .rightdrig .gr-datagrid-notitle {
border-bottom: none;
}
.gr-datagrid .gr-tag ::v-deep .el-collapse {
margin: 0 22px 0 18px !important;
}
.leftshuxing {
width: 300px;
background: #fff;
margin: 3px 0 3px 5px;
}
.rightdrig {
overflow: hidden;
flex: 1;
.gr-datagrid-notitle {
height: 90%;
height: calc(100% - 45px);
background: #fff;
margin: 3px 0 3px 5px;
padding: 0 17px;
border-bottom: solid 1px #d9d9d9;
.gr-tag {
line-height: 46px;
.data-title {
background: url('~@/assets/data-title.png') no-repeat center left;
padding-left: 20px;
font-size: 14px;
}
.el-button--primary {
color: #fff;
background: #409eff;
border-color: #409eff;
margin-left: 15px;
}
.el-button--primary:hover {
background-color: rgb(193, 218, 243);
border-color: rgb(121, 184, 248);
color: #000;
}
}
}
}
</style>
⽬录
<template>
<ul :>
<li v-for="(val, ind) of list" :key=ind @click="handlecli(val, ind)" :class="[ind == itemindex ? 'chose':null]">      <span>{{}}</span>
</li>
</ul>
</template>
<script>
export default {
data() {
return {
heightstyle: 500,
list: null,
itemindex: 0
}
},
created() {
this.heightstyle = document.body.clientHeight - 100
this.load()
},
methods: {
handlecli(val, ind) {
this.$emit('cliitem', val)
this.$store.state.chooseId = this.list[ind].dxid
this.itemindex = ind
},
load(param) {
(this, 'system_left_zxt', sult, param)
},
result(data) {
this.list = data
this.$store.state.chooseId = this.list[0].dxid
this.handlecli(this.list[0], 0)
}
}
}
</script>
<style scoped lang="scss">
ul {
padding: 10px;
overflow-y: auto;
box-sizing: border-box;
margin-top: 3px;
}
li {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
}
li:hover {
color: #3083f2;
background-color: #f5f7fa;
}
li.chose {
color: #3083f2;
background-color: #f5f7fa;
}
</style>
表格
<template>
<div>
<search @searchSubmit="searchSubmit"></search>  // 放在⽗页⾯⼀样
<div class="gr-tag">
<span class="data-title">功能管理</span>
<el-button type="primary" size="mini" @click="addFun">增加</el-button>
<el-button type="success" size="mini" @click="editFun">编辑</el-button>
<el-button type="info" size="mini" @click="jiny" v-if="chooseData[0] && chooseData[0].sfjy === '1'">禁⽤</el-button>
<el-button type="warning" size="mini" @click="kaiq" v-else>开启</el-button>
<el-button type="danger" size="mini" @click="deleteFun">删除</el-button>
</div>
<el-table @selection-change="changeCheckbox"  ref="multipleTable" :data="tableData" stripe borders :height="height" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" row-key="dxid">      <el-table-column type="selection" width="42"/>
<el-table-column prop="mc" label="功能名称" width="230"></el-table-column>
<el-table-column prop="icon" show-overflow-tooltip  label="ICON">
<template slot-scope="scope">
{{w.icon || '⽆'}}
</template>
</el-table-column>
<el-table-column :formatter="changeLx" prop="lx" label="类型">
</el-table-column>
<el-table-column prop="sfjy" label="是否禁⽤">
<template slot-scope="scope" >
<span :>
{{w.sfjy == 0 ? '是' : '否'}}
</span>
</template>
</el-table-column>
<el-table-column show-overflow-tooltip prop="ms" label="描述">
<template slot-scope="scope">
{{w.ms || '⽆'}}
</template>
</el-table-column>
<el-table-column prop="cjsj" label="创建时间" show-overflow-tooltip></el-table-column>
</el-table>
</div>
</template>
<script>
import index from './index.js'
export default index
</script>
<style lang="scss">
.el-checkbox__input.is-checked .el-checkbox__inner {
background-color: #409eff;
border-color: #409eff;
}
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
background-color: #409eff;
border-color: #409eff;
}
.el-table td {
padding: 8px 0;
}
.el-tooltip__popper {
font-size: 14px;
max-width: 50%;
}
</style>
表格逻辑
import { mapState } from 'vuex'
export default {
data() {
return {
dxid: '',
currentPage: 1,
pagePize: 15,
tableData: [],
height: 500,
total: 0,
canshu: {},
currentRow: []
}
},
computed: mapState(['chooseId', 'chooseData']),
created() {
this.height = document.body.clientHeight - 110
},
methods: {
changeCheckbox(val) {
this.$store.state.chooseData = val
},
addFun() {
},
editFun() {
this.$emit('editFun')
},
kaiq() {
if (this.chooseData.length !== 1) {
this.$message.warning('请选择⼀个功能菜单后操作')
return
}
this.chooseData[0].sfjy = '1'
this.api.post(this, 'edit_gn', () => {
this.$message.success('开启成功')
}, this.chooseData[0])
},
jiny() {
if (this.chooseData.length !== 1) {
this.$message.warning('请选择⼀个功能菜单后操作')
return
}
this.chooseData[0].sfjy = '0'
this.api.post(this, 'edit_gn', () => {
this.$message.success('已禁⽤')
}, this.chooseData[0])
},
deleteFun() {
this.$emit('deleteFun')
},
load(param) {
this.dxid = param.dxid
this.$store.state.chooseData = []
(this, 'system_zxt_menu', sult, param)
},
result(data) {
this.tableData = e(data)
},
gettree(data) {
var dataList = data
function fn(data, sjdxid) {
var result = []
var temp
for (var i in data) {
if (data[i].sjdxid === sjdxid) {
result.push(data[i])
temp = fn(data, data[i].dxid)
if (temp.length > 0) {
data[i].children = temp
}
}
}
return result
}
return fn(dataList, this.dxid)
},
changeLx(row) {
switch (row.lx) {
case '1':
return '平台'
case '2':
return '外链'
case '3':
return '弹窗'
case '4':
return 'iframe'
case '5':
return 'map点位绘制'
case '6':
return '服务调⽤'
case '7':
return 'map线、⾯绘制'
case '8':
return 'map⾯绘制'
case '9':
return 'map ICON替换'
}
},
indexMethod(index) {
return this.pageInfo.limit * (this.pageInfo.start - 1) + 1 + index
}
}
}
import组件内容（分了新增和编辑操作，看情况可合并）
新增操作（两个⽂件差别在逻辑不同）
<template>
<el-form :model="dataForm" label-width="110px" ref="dataForm" size="mini" :rules="rules" :inline="true" label-position="right">    <el-form-item label="功能名称" prop="mc">
<el-input v-model="" ></el-input>
</el-form-item>
<el-form-item label="访问路径" prop="fwlj">
<el-input v-model="dataForm.fwlj" ></el-input>
</el-form-item>
<el-form-item label="是否管理" prop="mrxs">
<el-select filterable v-model="s" placeholder="是否管理" >
<el-option label="是" value="1"></el-option>
<el-option label="否" value="0"></el-option>
</el-select>
</el-form-item>
<el-form-item label="icon" prop="icon">
<el-input v-model="dataForm.ICON" ></el-input>
</el-form-item>
<el-form-item label="描述" prop="ms">
<el-input v-model="dataForm.ms" ></el-input>
</el-form-item>
<el-form-item label="显⽰顺序" prop="xssx">
<el-input v-model="dataForm.xssx" ></el-input>
</el-form-item>
<el-form-item label="类型" prop="lx">
<el-select v-model="dataForm.lx" placeholder="选择类型" >
<el-option v-for="li in lxlist" :key="li.id" :label="li.label" :value="li.value"></el-option>
</el-select>
</el-form-item>
<!-- <el-form-item label="是否禁⽤" prop="sfjy">
<el-select filterable v-model="dataForm.sfjy" placeholder="是否禁⽤" >
<el-option label="是" value="1"></el-option>
<el-option label="否" value="0"></el-option>
</el-select>
</el-form-item> -->
<el-form-item label="上级对象" prop="sjdxid">
<el-select v-model="dataForm.sjdxid" filterable placeholder="选择上级对象" >
<el-option label="⽆上级菜单" value="" key=""></el-option>
<el-option :label="" :value="item.dxid" v-for="(item,index) in funList" :key="index"></el-option>      </el-select>
</el-form-item>
</el-form>
</template>
<script>
import { mapState } from 'vuex'
export default {
data() {
return {
funList: [],
dataForm: {
mc: '',
fwlj: '',
mrxs: '',
ICON: '',
sfjy: '0',
lx: '',
xssx: '',
sjc: '{datetime}',
cjsj: '{datetime}',
dxid: '{uuid}',
sjdxid: ''
},
lxlist: [
{ label: '平台', value: '1' },
{ label: '外链', value: '2' },
{ label: '弹窗', value: '3' },
{ label: 'iframe', value: '4' },
{ label: 'map点位绘制', value: '5' },
{ label: 'map服务调⽤', value: '6' },
{ label: 'map线、⾯绘制', value: '7' },
{ label: 'map⾯绘制', value: '8' },
{ label: 'map ICON替换', value: '9' }
]
,
rules: {
mrxs: [
{ required: true, message: '请选择是否默认显⽰', trigger: 'blur' }
],
mc: [
{ required: true, message: '请输⼊功能名称', trigger: 'blur' }
],
fwlj: [
{ required: true, message: '请输⼊访问路径', trigger: 'blur' }
],
xssx: [
{ required: true, message: '请输⼊显⽰顺序', trigger: 'blur' }
],
lx: [
{ required: true, message: '请输⼊类型', trigger: 'blur' }
],
sfjy: [
{ required: true, message: '请选择是否禁⽤', trigger: 'blur' }
]
}
}
},
computed: mapState(['chooseData', 'chooseId']),
methods: {
result(data) {
this.funList = data
},
submitForm(that) {
this.$refs.dataForm.validate(valid => {
if (!valid) {
return false
}
this.api.post(this, 'add_gn', () => {
this.$message.success('新增成功')
that.$load({ dxid: this.chooseId })
}, this.dataForm)
})
},
resetForm() {
this.$setFields()
}
},
created() {
for (const key in this.data) {
this.dataForm[key] = this.data[key]
}
(this, 'gn_list', sult)
if (this.chooseData.length) {
this.dataForm.sjdxid = this.chooseData[0].dxid
} else {
this.dataForm.sjdxid = this.chooseId
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。