paramSet.vue 3.01 KB
<template>
	<div>
		<el-dialog
		ref="dialog"
		  title="提示"
		  :visible.sync="visible"
		  width="50%"
		  :before-close="handleClose">
		  <div>
			  <div class="leftCon">
				  <div class="searchBox">
				  	<el-input
				  	  placeholder="输入关键字进行过滤"
				  	  v-model="filterText">
				  	</el-input>
				  </div>
				  <el-tree
				    :data="data"
				    :props="defaultProps"
				    default-expand-all
				    :filter-node-method="filterNode"
				    ref="tree">
				  </el-tree>
			  </div>
			  <div class="rightCon">
				  <el-table
				  height="522"
				    :data="tableData"
				    stripe
				    border>
				    <el-table-column
				    align="center"
				  	prop="num"
				  	label="参数名">
				    </el-table-column>
				    <el-table-column
				  	  align="center"
				  	prop="set"
				  	label="预设位配置">
				  	<template slot-scope="scope">
						<span>{{scope.row.num}}</span>
				  	</template>
				    </el-table-column>
				    <el-table-column
				  	  align="center"
				  	prop="type"
				  	label="说明">
				  	<template slot-scope="scope">
						<span>{{scope.row.num}}</span>
				  	</template>
				    </el-table-column>
				  </el-table>
			  </div>
			  <div style="clear: both;"></div>
		  </div>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="visiblehide">取 消</el-button>
		    <el-button type="primary" @click="visiblehide">确 定</el-button>
		  </span>
		</el-dialog>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				tableData:[
					{
						num:1
					},
					{
						num:1
					},{
						num:1
					}
				],
				filterText: '',
				data: [{
				  id: 1,
				  label: '一级 1',
				  children: [{
					id: 4,
					label: '二级 1-1',
					children: [{
					  id: 9,
					  label: '三级 1-1-1'
					}, {
					  id: 10,
					  label: '三级 1-1-2'
					}]
				  }]
				}, {
				  id: 2,
				  label: '一级 2',
				  children: [{
					id: 5,
					label: '二级 2-1'
				  }, {
					id: 6,
					label: '二级 2-2'
				  }]
				}, {
				  id: 3,
				  label: '一级 3',
				  children: [{
					id: 7,
					label: '二级 3-1'
				  }, {
					id: 8,
					label: '二级 3-2'
				  }]
				}],
				defaultProps: {
				  children: 'children',
				  label: 'label'
				}
			}
		},
		props:{
			visible:{
				type:Boolean,
				default:false
			},
		},
		methods:{
			filterNode(value, data) {
				if (!value) return true;
				return data.label.indexOf(value) !== -1;
			},
			handleClose(done){
				this.$emit('update:visible',false);
			},
			visiblehide(){
				this.$emit('update:visible',false)
			}
		}
	}
</script>

<style scoped="scoped" lang="scss">
	.rightCon{
		width: 608px;
		margin-left: 12px;
		float: left;
	}
	.leftCon{
		float: left;
		width: 250px;
		border: 1px solid #CCCCCC;
		border-radius: 4px;
		padding: 10px;
		min-height: 500px;
	}
	.titles{
		height:30px;
		background:rgba(59,183,255,1);
		color: $white-font-color;
		font-size:14px;
		padding-left: 13px;
		line-height: 30px;
	}
	.searchBox{
		padding: 10px;
	}
</style>