| | |
| | | </div> |
| | | <div style="text-align: center"> |
| | | <el-transfer |
| | | style="text-align: left; display: inline-block" |
| | | style="text-align: left; display: inline-block;height: 400px" |
| | | filterable |
| | | :filter-method="filterMethod" |
| | | filter-placeholder="请输入城市拼音" |
| | | filter-placeholder="关键词搜索" |
| | | v-model="value" |
| | | :titles="['未选属性', '已选属性']" |
| | | :data="data"> |
| | | </el-transfer> |
| | | </div> |
| | |
| | | <script> |
| | | export default { |
| | | name: "MasterTransfer", |
| | | props:['visible','tableHeadData'], |
| | | props:['visible','tableHeadData','codeClassifyOid'], |
| | | data(){ |
| | | const generateData = () => { |
| | | const data = []; |
| | | const cities = ['上海', '北京', '广州', '深圳', '南京', '西安', '成都']; |
| | | cities.forEach((city, index) => { |
| | | data.push({ |
| | | label: city, |
| | | key: index, |
| | | }); |
| | | }); |
| | | return data; |
| | | }; |
| | | return { |
| | | data: generateData(), |
| | | data: [], |
| | | value: [], |
| | | filterMethod(query, item) { |
| | | return item.label.indexOf(query) > -1; |
| | | }, |
| | | dialogPush:this.visible, |
| | | radio:0, |
| | | tableHeadFindData:[] |
| | | tableHeadFindData:[], |
| | | tableExportData:[], |
| | | option:{ |
| | | title: '文档标题', |
| | | column: [{ |
| | | label: '多级表头', |
| | | prop: 'header', |
| | | children: [] |
| | | }], |
| | | data: [{ |
| | | title1: "测试数据1", |
| | | title2: "测试数据2" |
| | | }, { |
| | | title1: "测试数据2", |
| | | title2: "测试数据2" |
| | | }] |
| | | } |
| | | }; |
| | | }, |
| | | watch:{ |
| | |
| | | visible (){ |
| | | this.dialogPush = this.visible; |
| | | }, |
| | | tableHeadData(){ |
| | | this.tableHeadFindData=this.tableHeadData; |
| | | |
| | | //表头数据 用来渲染穿梭框 |
| | | tableHeadData:{ |
| | | handler(newval,oldval){ |
| | | if(newval){ |
| | | this.tableHeadFindData=newval.map(obj => obj.label); |
| | | this.tableHeadFindData.forEach((city, index) => { |
| | | this.data.push({ |
| | | label: city, |
| | | key: index, |
| | | }); |
| | | }); |
| | | return this.data; |
| | | } |
| | | } |
| | | }, |
| | | codeClassifyOid:{ |
| | | handler(newval,oldval){ |
| | | console.log('daochu',newval,oldval) |
| | | } |
| | | } |
| | | }, |
| | | computed:{ |
| | | |
| | | }, |
| | | mounted() { |
| | | console.log(this.tableHeadData) |
| | | this.ExportRend() |
| | | }, |
| | | methods:{ |
| | | //关闭页面 |
| | | recoverPage(){ |
| | | this.$emit('update:visible', false); |
| | | }, |
| | | //导出表格数据转换表头信息 |
| | | ExportRend(){ |
| | | this.tableExportData=this.tableHeadData.map(obj => { |
| | | return { |
| | | label: obj.label, |
| | | prop: obj.prop |
| | | } |
| | | }) |
| | | console.log(this.tableExportData) |
| | | } |
| | | } |
| | | } |