```bash
<template>
<div class="app-container">
<div v-show="isShow">
<div class="input">
<el-select v-model="value" filterable placeholder="选择部门">
<el-option
v-for="item in tableData1"
:key="item.c"
:label="item.menuName"
:value="item.id"
/>
</el-select>
<el-select v-model="value2" filterable placeholder="选择职业">
<el-option
v-for="item in tableData1"
:key="item.id"
:label="item.occupation"
:value="item.id"
/>
</el-select>
<el-select v-model="value3" filterable placeholder="选择状态">
<el-option
v-for="item in tableData1"
:key="item.id"
:label="item.state"
:value="item.id"
/>
</el-select>
<el-button type="primary" @click="doFilter">搜索</el-button>
</div>
<div class="content">
<div class="title">
<h3 class="tab-title">职员列表</h3>
<el-button
type="primary"
class="seach"
style="margin-left:10px;"
:class="{'selected':tab === 1,'testTitle':true}"
@click="test='StaffAdd'"
>职员导入</el-button>
<el-button
type="primary"
class="seach"
:class="{'selected':tab === 2,'testTitle':true}"
@click="test='FilenameOption'"
>职员添加</el-button>
<!-- :class="{'selected':tab === 2,'testTitle':true}"
@click="toTab(2)" -->
</div>
<el-table
:data="tableData1"
style="wiusernamedth: 100%;margin-bottom: 20px;"
row-key="id"
border
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
>
<el-table-column prop="id" label="ID" width="180" />
<el-table-column prop="username" label="用户名" width="180" />
<el-table-column prop="name" label="姓名" />
<el-table-column prop="tel" label="手机号码" />
<el-table-column prop="menuName" label="所属部门" />
<el-table-column prop="occupation" label="职位" />
<el-table-column prop="state" label="状态" />
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" type="info" plain @click="handleEdit(scope.$index, scope.row)">
<i class="el-icon-edit-outline" />
</el-button>
<el-button size="mini" type="info" plain @click="remove(scope.$index, scope.row)">
<i class="el-icon-delete" />
</el-button>
</template>
</el-table-column>
</el-table>
<!--弹窗-->
<el-dialog :title="dialogTitle" width="50%" :visible.sync="iconFormVisible">
<el-form :inline="true" :model="userInfo" class="demo-form-inline">
<el-form-item label="上级部门">
<el-input v-model="userInfo.name" placeholder="上级部门" />
</el-form-item>
<el-form-item label="部门名称">
<el-input v-model="userInfo.date" placeholder="部门名称" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="iconFormVisible = false">取 消</el-button>
<el-button type="primary" @click="submitUser()">确 定</el-button>
</div>
</el-dialog>
</div>
</div>
<!-- <div>
<keep-alive>
<StaffAdd v-if="tab===1" />
<FilenameOption v-if="tab===2" />
</keep-alive>
</div> -->
<component :is='test'></component>
</div>
</template>
<script>
// import { fetchList } from '@/api/article'
import StaffAdd from './components/StaffAdd'
import FilenameOption from './components/FilenameOption'
export default {
name: 'MergeHeader',
components: {
StaffAdd,
FilenameOption
},
data() {
return {
tab: '',
isShow: true,
value: '',
test: '',
iconFormVisible: false,
userInfo: {},
dialogTitle: '增加',
rowIndex: null,
tableData1: [
{
id: 1,
menuName: '系统管理',
name: 'system',
state: '离职',
occupation: '产品',
username: '小米',
tel: '123456',
children: [
{
id: 31,
menuName: '菜单信息',
name: '王小虎',
state: '离职',
occupation: '运营',
username: '丽华',
tel: '89228'
}
]
},
{
id: 2,
menuName: '人事管理',
name: 'personnel',
state: '在职',
occupation: '设计',
username: '雪华',
tel: '455555',
children: [
{
id: 99,
menuName: '部门信息',
name: 'personnel_department',
state: '在职',
occupation: '会计',
username: '刘华',
tel: '77777'
},
{
id: 94,
menuName: '1',
name: 'personnel_position',
state: '离职',
occupation: '人力资源',
username: '许欸',
tel: '666666'
}
]
}
],
options2: [
{
value2: '选项1',
label2: '黄金糕',
disabled: true
},
{
value2: '选项2',
label2: '双皮奶'
}
],
value2: '',
options3: [
{
value3: '选项1',
label3: '在职',
disabled: true
},
{
value3: '选项2',
label3: '离职'
}
],
value3: ''
}
},
created() {},
methods: {
// 编辑
handleEdit(index, row) {
this.dialogTitle = '编辑'
this.userInfo = row
this.iconFormVisible = true
this.rowIndex = index
},
// 弹窗确定
submitUser() {
if (this.dialogTitle === '编辑') {
this.tableData1.splice(this.rowIndex, 1, this.userInfo)
this.iconFormVisible = false
return
}
this.tableData1.splice(0, 0, this.userInfo)
this.iconFormVisible = false
},
// 删除
remove(index, row) {
this.$confirm(`确定删除${row.menuName}吗?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'error'
}).then(() => {
this.tableData1.splice(index, 1)
})
},
btnClick() {
const vm = this
vm.$router.replace({ name: '/StaffAdd', params: { id: 10 }})
},
toTab(index) {
this.tab = index
this.isShow = !this.isShow
console.log(this.tab)
},
// 前端搜索功能需要区分是否检索,因为对应的字段的索引不同
// 用两个变量接收currentChangePage函数的参数
doFilter() {
debugger
if (this.tableDataName === '') {
this.$message.warning('查询条件不能为空！')
return
}
this.tableDataEnd = []
// 每次手动将数据置空,因为会出现多次点击搜索情况
this.filterTableDataEnd = []
this.tableData1.forEach((value, index) => {
if (value.name) {
if (value.name.indexOf(this.tableDataName1) >= 0) {
this.filterTableDataEnd.push(value)
console.log(value.name)
}
}
})
return this.filterTableDataEnd
// eslint-disable-next-line no-unreachable
}
}
}
</script>
<style lang="scss" scoped>
.input {
width: 98%;
border: 1px solid #b6e0d8;
height: 60px;
border-radius: 5px;
line-height: 59px;
padding-left: 15px;
}
.seach {
padding: 8px 13px;
font-size: 12px;
float: right;
margin-top: 8px;
}
.title {
width: 99%;
height: 32px;
line-height: 35px;
margin: 0 auto;
padding-bottom: 5px;
}
.content {
width: 98%;
border: 1px solid #b3cdda;
margin: 0 auto;
margin-top: 10px;
padding-bottom: 20px;
border-radius: 5px;
color: black;
margin-left: 2px;
}
.tab {
width: 99%;
// border: 1px solid #fff;
margin: 0 auto;
margin-top: 10px;
}
.tab-title {
color: #525759;
display: table-cell;
}
/deep/ .el-table thead {
color: #131314 !important;
}
/deep/ .el-button--medium {
margin-top: -23px !important;
margin-left: 20px !important;
margin-bottom: 10px;
}
</style>
https://blog.csdn.net/shenzhen_zsw/article/details/81128271
