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

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-load