element+el-transfer 封裝穿梭框組件（初版）

項目中碰到過這樣一個需求，就是需要把表頭列字段自定義顯示和隱藏，效果如下：

 查過一些資料，最終實現效果代碼如下：

//父組件
<template>
 <div>
       <el-table
          ref="table"
          style="width: 100%"
          class="table-wrap"
          :data="priceList"
          height="100%"
          row-key="id"
          stripe
          border
        >
         <!-- 通過isShowCol方法顯示或隱藏列-->
          <el-table-column v-if="isShowCol('priceCode')" prop="priceCode" label="價單編號" align="center">
            <template slot-scope="{ row }">
              {{ row.priceCode }}
            </template>
          </el-table-column>
      </el-table>
<!-- 穿梭框
     ----tableHeaderTit:頭部list所需參數值{key, label, field, isshow(Boolean值)}
     ----dialogShuttleFrameVisible彈出窗Boolean值
     ----leftDefaultChecked [1,2] 左側為默認隱藏值(key唯一值)
     ----rightDefaultChecked [] 右側為tableHeader可顯示值
     ----defaultvalue[] 初始化默認顯示值-->
    <dialogShuttleFrame
      v-if="dialogShuttleFrameVisible"
      :table-header-tit="tableHeaderTit"
      :dialog-shuttle-frame-visible="dialogShuttleFrameVisible"
      :left-default-checked="leftDefaultChecked"
      :right-default-checked="rightDefaultChecked"
      :defaultvalue="defaultvalue"
      @shuttleFramehandleChange="shuttleFramehandleChange"
      @dialogSaveSeting="dialogSaveSeting"
    />
</div>
</template>
<script>
   import dialogShuttleFrame from '@/layout/components/common/dialogShuttleFrame.vue';
export default{
   name:'Table',
   components: {
     dialogShuttleFrame
   },
   data(){
      return{
          tableHeaderTit: [
           { key: 1, label: '價單編號', field: 'priceCode', isshow: true },
           { key: 2, label: '價單名稱', field: 'priceName', isshow: true },
           { key: 3, label: '幣種', field: 'currency', isshow: false },
           { key: 4, label: '業務類型', field: 'businessTypeName', isshow: true },
           { key: 5, label: '審批狀態', field: 'auditStatusName', isshow: true },
           { key: 6, label: '啟用日期', field: 'startDate', isshow: true },
           { key: 7, label: '截止日期', field: 'endDate', isshow: false }
         ],
         displayData: [],
         defaultvalue: [],
         leftDefaultChecked: [],
         rightDefaultChecked: [],
         priceList:[],
         dialogShuttleFrameVisible: false
      }
   },
   async mounted() {
    await this.initHandle();
   },
   methods:{
       initHandle(){
         //初始化觸發
         this.defaultCheckHandle();
       },
       // 穿梭框
      // 觸發穿梭框
      shuttleFrameHandle() {
          this.dialogShuttleFrameVisible = true;
       },
      dialogSaveSeting() {
          // 保存設置(穿梭框)
         this.dialogShuttleFrameVisible = false;
          const arr = [];
          this.tableHeaderTit.forEach((item) => {
              if (!this.displayData.includes(item.key)) {
                  item.isshow = false;
              } else {
                  item.isshow = true;
              }
              arr.push(item);
           });
           this.tableHeaderTit = arr;
           this.defaultCheckHandle();
      },
      isShowCol(field) {
        // 是否顯示表頭列
       const sd = this.tableHeaderTit.filter((item) => { return item.field === field; });
         return sd[0].isshow;
      },
      shuttleFramehandleChange(value, direction, movedKeys) {
         // 觸發選擇（去左邊or去右邊）
        console.log(value, direction, movedKeys);
        this.displayData = value;
      },
      defaultCheckHandle() {// 初始化默認穿梭框值
          const leftCheck = [];
          const rightCheck = [];
          this.tableHeaderTit.forEach((item) => {
              if (item.isshow == false) {
                 leftCheck.push(item.key);
              } else {
                  rightCheck.push(item.key);
              }
          });
          this.leftDefaultChecked = leftCheck;
          this.rightDefaultChecked = rightCheck;
          this.displayData = rightCheck;
          this.defaultvalue = rightCheck;
      }
   }
}
</script>

//子組件 dialogShuttleFrame.vue
<template>
    <div class="shuttleFrame">
      <el-dialog
        title="編輯顯示字段"
        :visible.sync="dialogShuttleFrameVisible"
        :close-on-click-modal="false"
        width="35%"
      >
        <div style="text-align: center">
          <el-transfer
            v-model="value"
            style="text-align: left; display: inline-block"
            filterable
            :left-default-checked="leftDefaultChecked"
            :right-default-checked="rightDefaultChecked"
            :render-content="renderFunc"
            :titles="['隱藏字段', '顯示字段']"
            :format="{
              noChecked: '${total}',
              hasChecked: '${checked}/${total}'
            }"
            :data="tableHeaderTit"
            @change="handleChange"
          />
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogSaveSeting">保存設置</el-button>
        </span>
      </el-dialog>
    </div>
</template>
<script>
export default {
  name: 'dialogShuttleFrame',
  props: ['tableHeaderTit', 'leftDefaultChecked', 'rightDefaultChecked','defaultvalue','dialogShuttleFrameVisible'],
  components: {},
  data() {
    return {
      renderFunc(h, option) {
        return <span>{ option.key } - { option.label }</span>;
      },
      value:[],
    };
  },
  computed: {},
  async mounted() {
    this.value=this.defaultvalue;
  },
  methods: {
    handleChange(value, direction, movedKeys){
      //觸發選擇（去左邊or去右邊）
        this.$emit('shuttleFramehandleChange', value, direction, movedKeys)
    },
    dialogSaveSeting(){
      //保存設置
      this.$emit('dialogSaveSeting')
    }
  }
};
</script>

 

 

 

 

-------END