| | |
| | | <el-header :height="headerHeight">
|
| | | <el-row>
|
| | | <el-col :span="16">
|
| | | <h3 class="bu-tian-jia-title"></h3>
|
| | | <h3 class="bu-tian-jia-title" />
|
| | | </el-col>
|
| | | <el-col :span="8">
|
| | | <el-input v-model="input" placeholder="请输入内容" style="width:200px" />
|
| | |
| | | <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" />
|
| | | </el-aside>
|
| | | <el-main>
|
| | | <el-table |
| | | ref="multipleTable" |
| | | :data="tableData" |
| | | style="width: 100%;height: 90%;" |
| | | <el-table
|
| | | ref="multipleTable"
|
| | | :data="tableData"
|
| | | style="width: 100%;height: 90%;"
|
| | | row-key="prop1"
|
| | | @selection-change="handleSelectionChange" |
| | | @selection-change="handleSelectionChange"
|
| | | >
|
| | | <el-table-column type="selection" :reserve-selection="true" width="55" />
|
| | | <el-table-column prop="prop0" label="序号" />
|
| | |
| | | <el-table-column prop="prop2" label="姓名" />
|
| | | </el-table>
|
| | | <el-button type="primary" @click="sureChoose">确定</el-button>
|
| | | <el-button type="danger" @click="cancleChoose">取消</el-button>
|
| | | <el-button type="danger" @click="cancleChoose">取消</el-button>
|
| | | </el-main>
|
| | | </el-container>
|
| | | </el-container>
|
| | | </div>
|
| | | </template>
|
| | | <script>
|
| | | export default {
|
| | | data() {
|
| | | return {
|
| | | headerHeight: '70px',
|
| | | advancedQueryShow: false,
|
| | | dialogTableVisible: false,
|
| | | multipleSelection: [],
|
| | | tableData: [{
|
| | | 'prop0': '1',
|
| | | 'prop1': '2100452312',
|
| | | 'prop2': '赵建国',
|
| | | 'prop3': '男',
|
| | | 'prop4': '510304197402225813',
|
| | | 'prop5': '10',
|
| | | 'prop6': '汉族',
|
| | | 'prop7': '170',
|
| | | 'prop8': '46',
|
| | | 'prop9': '党员',
|
| | | 'prop10': '大专',
|
| | | 'prop11': '广东省番禺市',
|
| | | 'prop12': '',
|
| | | 'prop13': '',
|
| | | 'prop14': '已移交',
|
| | | 'prop15': '在职',
|
| | | 'prop16': '133023187889'
|
| | | }, {
|
| | | 'prop0': '2',
|
| | | 'prop1': '2101620946',
|
| | | 'prop2': '罗启艳',
|
| | | 'prop3': '女',
|
| | | 'prop4': '41272619740120543X',
|
| | | 'prop5': '10',
|
| | | 'prop6': '汉族',
|
| | | 'prop7': '175',
|
| | | 'prop8': '46',
|
| | | 'prop9': '团员',
|
| | | 'prop10': '高中',
|
| | | 'prop11': '广东省番禺市',
|
| | | 'prop12': '',
|
| | | 'prop13': '',
|
| | | 'prop14': '已移交',
|
| | | 'prop15': '在职',
|
| | | 'prop16': '189135789889'
|
| | | }], |
| | | data: [{ |
| | | label: '一级 1', |
| | | children: [{ |
| | | label: '二级 1-1', |
| | | children: [{ |
| | | label: '三级 1-1-1' |
| | | }] |
| | | }] |
| | | }, |
| | | { |
| | | label: '一级 2', |
| | | children: [{ |
| | | label: '二级 2-1', |
| | | children: [{ |
| | | label: '三级 2-1-1' |
| | | }] |
| | | }, |
| | | { |
| | | label: '二级 2-2', |
| | | children: [{ |
| | | label: '三级 2-2-1' |
| | | }] |
| | | } |
| | | ] |
| | | }, |
| | | { |
| | | label: '一级 3', |
| | | children: [{ |
| | | label: '二级 3-1', |
| | | children: [{ |
| | | label: '三级 3-1-1' |
| | | }] |
| | | }, |
| | | { |
| | | label: '二级 3-2', |
| | | children: [{ |
| | | label: '三级 3-2-1' |
| | | }] |
| | | } |
| | | ] |
| | | } |
| | | ],
|
| | | defaultProps: {
|
| | | children: 'children',
|
| | | label: 'label'
|
| | | export default {
|
| | | data() {
|
| | | return {
|
| | | headerHeight: '70px',
|
| | | advancedQueryShow: false,
|
| | | dialogTableVisible: false,
|
| | | multipleSelection: [],
|
| | | tableData: [{
|
| | | 'prop0': '1',
|
| | | 'prop1': '2100452312',
|
| | | 'prop2': '赵建国',
|
| | | 'prop3': '男',
|
| | | 'prop4': '510304197402225813',
|
| | | 'prop5': '10',
|
| | | 'prop6': '汉族',
|
| | | 'prop7': '170',
|
| | | 'prop8': '46',
|
| | | 'prop9': '党员',
|
| | | 'prop10': '大专',
|
| | | 'prop11': '广东省番禺市',
|
| | | 'prop12': '',
|
| | | 'prop13': '',
|
| | | 'prop14': '已移交',
|
| | | 'prop15': '在职',
|
| | | 'prop16': '133023187889'
|
| | | }, {
|
| | | 'prop0': '2',
|
| | | 'prop1': '2101620946',
|
| | | 'prop2': '罗启艳',
|
| | | 'prop3': '女',
|
| | | 'prop4': '41272619740120543X',
|
| | | 'prop5': '10',
|
| | | 'prop6': '汉族',
|
| | | 'prop7': '175',
|
| | | 'prop8': '46',
|
| | | 'prop9': '团员',
|
| | | 'prop10': '高中',
|
| | | 'prop11': '广东省番禺市',
|
| | | 'prop12': '',
|
| | | 'prop13': '',
|
| | | 'prop14': '已移交',
|
| | | 'prop15': '在职',
|
| | | 'prop16': '189135789889'
|
| | | }],
|
| | | data: [{
|
| | | label: '一级 1',
|
| | | children: [{
|
| | | label: '二级 1-1',
|
| | | children: [{
|
| | | label: '三级 1-1-1'
|
| | | }]
|
| | | }]
|
| | | },
|
| | | {
|
| | | label: '一级 2',
|
| | | children: [{
|
| | | label: '二级 2-1',
|
| | | children: [{
|
| | | label: '三级 2-1-1'
|
| | | }]
|
| | | },
|
| | | {
|
| | | label: '二级 2-2',
|
| | | children: [{
|
| | | label: '三级 2-2-1'
|
| | | }]
|
| | | }
|
| | | ]
|
| | | },
|
| | | {
|
| | | label: '一级 3',
|
| | | children: [{
|
| | | label: '二级 3-1',
|
| | | children: [{
|
| | | label: '三级 3-1-1'
|
| | | }]
|
| | | },
|
| | | {
|
| | | label: '二级 3-2',
|
| | | children: [{
|
| | | label: '三级 3-2-1'
|
| | | }]
|
| | | }
|
| | | ]
|
| | | }
|
| | | },
|
| | | methods: {
|
| | | handleNodeClick(data) {
|
| | | console.log(data)
|
| | | },
|
| | | handleSelectionChange(val) {
|
| | | this.multipleSelection = val
|
| | | },
|
| | | advancedQueryShowMethods() {
|
| | | if (this.advancedQueryShow) {
|
| | | this.headerHeight = '70px'
|
| | | this.advancedQueryShow = false
|
| | | } else {
|
| | | this.headerHeight = '410px'
|
| | | this.advancedQueryShow = true
|
| | | }
|
| | | },
|
| | | showEmpInfo() {
|
| | | this.dialogTableVisible = true
|
| | | },
|
| | | sureChoose() {
|
| | | this.$emit('selectedUser', this.multipleSelection)
|
| | | }, |
| | | cancleChoose(){ |
| | | this.$emit('cancleChooseUser') |
| | | ],
|
| | | defaultProps: {
|
| | | children: 'children',
|
| | | label: 'label'
|
| | | }
|
| | | }
|
| | | },
|
| | | methods: {
|
| | | handleNodeClick(data) {
|
| | | console.log(data)
|
| | | },
|
| | | handleSelectionChange(val) {
|
| | | this.multipleSelection = val
|
| | | },
|
| | | advancedQueryShowMethods() {
|
| | | if (this.advancedQueryShow) {
|
| | | this.headerHeight = '70px'
|
| | | this.advancedQueryShow = false
|
| | | } else {
|
| | | this.headerHeight = '410px'
|
| | | this.advancedQueryShow = true
|
| | | }
|
| | | },
|
| | | showEmpInfo() {
|
| | | this.dialogTableVisible = true
|
| | | },
|
| | | sureChoose() {
|
| | | this.$emit('selectedUser', this.multipleSelection)
|
| | | },
|
| | | cancleChoose() {
|
| | | this.$emit('cancleChooseUser')
|
| | | }
|
| | | }
|
| | | }
|
| | | </script>
|
| | | <style lang="scss">
|
| | | .el-aside {
|
| | |
| | | .del_button {
|
| | | color: #D9001B;
|
| | | }
|
| | | </style> |
| | | </style>
|