Elemet-UI 中利用穿梭框对表格列进行动态设置

第一步引入控件

在需要表格设置的文件下引入公共穿梭框控件

import Transfer from '../components/common/Transfer'components: {Transfer
},

在表格右上方显示 ‘共 5 条’ 的下面添加表格设置 button 并引入穿梭框控件

<div class="tableLeftDiv">{{$t('g_word.total')}}<span class="leftSpan" style="color:red"> {{pageInfo.totalRows}}</span> {{$t('g_word.classifier')}}<el-button class="settingBtn" type="text" icon="el-icon-setting" @click="SettingTable">表格设置</el-button><Transfer :transfer-modal="TransferModal" :rightArr="RightDataArr" @Transfer-cancel="TransferCancel" @Transfer-ok="TransferOk"></Transfer>
</div>

在 data 中定义穿梭Modal框

TransferModal:{visible: false,current: {}
},

第二步表格结构’大换血’

原先这种形式的写的表格全部需要替换掉

<el-table v-loading="listLoading" :height="tableHeight" stripe :key="tableKey" :data="list" fit highlight-current-row @selection-change="handleSelectionChange"><el-table-column type="selection" width="40" align="center"></el-table-column><el-table-column label="序号" type="index" width="60" align="center"></el-table-column><el-table-column label="用户姓名" align="center" prop="employeeName" width="100"><template slot-scope="scope"><el-button type="text" @click="handleView(scope.row)">{{ scope.row.employeeName }}</el-button></template></el-table-column><el-table-column label="手机号码" width="120" align="center" prop="telephone"></el-table-column><el-table-column label="邮箱" align="center" prop="email" width="200"></el-table-column><el-table-column label="所属组织" align="center" prop="orgName" width="200"></el-table-column>
</el-table>

改写成如下的格式：用 v-for去动态遍历表格的列信息 cols

<el-table v-loading="listLoading" :height="tableHeight" stripe :key="tableKey" :data="list" fit highlight-current-row><el-table-columnalign="center"v-for="(col,key) in cols":prop="col.prop" :label="col.label":type="col.type" :key="key" :width="col.width"><template slot-scope="scope" ><el-checkbox  v-if="col.type=='selection'" @change="changes(scope.row)"></el-checkbox><span v-if="col.type=='index'">{{scope.$index+1}}</span><span v-if="col.prop=='employeeName'"><el-button type="text" @click="handleView1(scope.row)">{{ scope.row.employeeName }}</el-button></span><span v-if="col.prop=='telephone'">{{ scope.row.telephone}}</span><span v-if="col.prop=='email'">{{ scope.row.email}}</span><span v-if="col.prop=='companyName'">{{ scope.row.companyName}}</span><span v-if="col.prop=='creator'">{{ scope.row.creator}}</span><span v-if="col.prop=='createTime'">{{ scope.row.createTime | protectActive }}</span><span v-if="col.prop=='status' && scope.row.status == 'ON'">启用</span><span v-if="col.prop=='status' && scope.row.status == 'OFF'">禁用</span></template></el-table-column>
</el-table>

在 data 中定义 cols

cols: [{type: 'selection',width:'40'},{type: 'index', label: '序号',width:'60'},{prop: 'employeeName', label: '用户姓名'},{prop: 'telephone', label: '手机号码'},{prop: 'email', label: '邮箱'},{prop: 'companyName', label: '所属公司'},{prop: 'creator', label: '创建人'},{prop: 'createTime', label: '创建时间'},{prop: 'status', label: '状态'},
],
initCols:[],//备份列表头
RightDataArr: []//隐藏内容

第三部在methods中添加对应的方法

代码如下：

changes(val){//勾选列表前的 checkbox 触发与之前表格绑定的 @selection-change="handleSelectionChange" 对应let self = thisif(self.RowSelection.indexOf(val)==-1){self.RowSelection.push(val);}else{let ind = self.RowSelection.indexOf(val);self.RowSelection.splice(ind,1);}
},
SettingTable(){let self = thisself.TransferModal.visible  = trueself.TransferModal.current  = self.initCols
},
TransferCancel(){let self = thisself.TransferModal.visible = false
},
TransferOk(val){let self = thisself.TransferModal.visible = falseself.RightDataArr = valself.cols = [{type: 'selection',width:'40'},{type: 'index', label: '序号',width:'60'},]// console.log(val.indexOf(self.initCols[3].prop))for(let i =0;i<self.initCols.length;i++){if(self.initCols[i].prop && val.indexOf(self.initCols[i].prop) == -1 ){self.cols.push(self.initCols[i])}}
}

在 created()中需要去保存初始化的表格列信息

created() {this.getList()this.initCols = this.cols
},

实现效果

Elemet-UI 中利用穿梭框对表格列进行动态设置相关推荐

word表格列宽如何设置？
word虽然大部分都是用来做内容编辑,但实际上也有表格功能哦!插入表格并不难,那么word表格列宽如何设置?方法简单易懂,大家动动手学起来! 步骤1.我们从头到尾说一次吧!先打开一个word文档: 步 ...
文本框清空_VBA代码中利用文本框，完成人机对话过程
VBA++ 题记: 静下心,多学习有用的知识,多提高自己的水平和能力,这才是正道.时间就像一张网,你撒在哪里,你的收获就在哪里.谨记自己的方向,这是路之所在.适当节制自我的各种欲望,谁都逃不过时间的历 ...
ElementUI中Transfer穿梭框的使用、赋值取值进而实现新增和编辑功能
场景要实现的效果如下这里用到了ElemrntUI的Transfer穿梭框控件官方示例代码 <template><p style="text-align: center ...
pyqt5中利用搜索框和按钮，搜索表中内容
之前找了很多关于这方面的资料,但是都不太满意,通过询问和尝试,终于找到了这样的一个方法,希望对你们有用: 先上代码: self.searchLab = QLineEdit(self) self.sea ...
Vue 利用后端的数据字典和Map对象实现表格列字段动态转义的处理方案
Vue中,使用el-table组件,经常遇到列字段转义的问题.常规处理方法有以下两种: 方法1:在模板中使用v-if,直接转义.如: N Y 方法2:使用formatter,进行转义处理,如: 在 ...
table表格列宽动态调整方案
在做表格的时候,设置好的列宽却因为数据太长导致换行,想让它自己调整宽度,但是现在elementUI组件好像还没有这个功能.所以自己写了一个方法实现它. 一个动态改变表格列宽的方法该方法实现了自适应列 ...
计算机表格列宽怎么设置,表格列宽怎么设置厘米
大家好,我是时间财富网智能客服时间君,上述问题将由我为大家进行解答. 以Excel为例,表格列宽设置厘米的操作方法如下: 1.打开表格,将鼠标放在一列的表头,单击右键,在弹出的标签里选择列宽: 2.点 ...
你有没有觉得邮件发送人固定配置在yml文件中是不妥当的呢？SpringBoot 动态设置邮件发送人
明月当天,不知道你有没有思念的人前言之前其实已经写过SpringBoot异步发送邮件,但是今天在一个小项目中要用到发送邮件时,我突然觉得邮件发送人只有一个,并且固定写在yml文件中,就是非常的不妥 ...
elemet UI 中表格数据的排序操作
入上图所示,我们要对"拨打次数"."通话次数","通话时间" 进行排序.这里有什么办法呢? 其实排序的主要工作量是在后端,前端只需要将排序 ...

Elemet-UI 中利用穿梭框对表格列进行动态设置

Elemet-UI 中利用穿梭框对表格列进行动态设置

第一步引入控件

第二步表格结构’大换血’

第三部在methods中添加对应的方法

实现效果

Elemet-UI 中利用穿梭框对表格列进行动态设置相关推荐

最新文章

热门文章

Elemet-UI 中利用穿梭框对表格列进行动态设置

Elemet-UI 中利用穿梭框对表格列进行动态设置

第一步 引入控件

第二步 表格结构’大换血’

第三部 在methods中添加对应的方法

实现效果

Elemet-UI 中利用穿梭框对表格列进行动态设置相关推荐

最新文章

热门文章

第一步引入控件

第二步表格结构’大换血’

第三部在methods中添加对应的方法