Vue3+elementPlus:el-table列设置-拖拽列 （二）

列设置功能

1.动态设置列是否展示 (juejin.cn/post/735838…)

2.可拖拽设置列的显示顺序（本篇内容）

思路

vuedraggable中文文档：www.itxst.com/vue-draggab…

接着上一篇，拖拽设置列显示顺序，这里主要用的包是 vuedraggable

根据文档的demo,引入vuedraggable,将需要拖拽的数组包裹起来。

重点!!!:<draggable>组件下的<template>只能包含一个div

//html
<div class="s-content">
          <draggable
            v-model="list"
            animation="300"
            @end="onEnd" //结束调用
          >
            <template #item="{ element, index }" :key="index" >
              <div class="item" id="item" ref="tableRef"  v-if="element.params || element.params == undefined">
                <el-icon :size="15" class="rank"><Rank /></el-icon>
                <el-checkbox
                  :label="element.label"
                  v-model="element.ifcolumn"
                  @change="CheckedChange"
                  >{{ element.label }}</el-checkbox
                >
              </div>
            </template>
          </draggable>
        </div>

调试一下，发现报错了

查询一番，发现需要在draggable上添加item-key="id"

完整代码

子组件Colsetting.vue

<script setup>
import { computed, onMounted, ref, watch } from "vue";
import draggable from "vuedraggable";

//列设置
const visible = ref(false);

const checkAll = ref(false);
const isIndeterminate = ref(true);

// 接收父组件
const row = defineProps({
  columnList: Array,
});

const emits=defineEmits(["getlistValue"])

const list =ref(row.columnList) ;

// 全选按钮
const handleCheckAllChange = (val) => {
  list.value.forEach((e) => {
    e.ifcolumn = val;
  });
  emits("getlistValue",list.value)
};
const CheckedChange = () => {
  // 判断是否全选
  let checkall = true;
  list.value.forEach((e) => {
    if (e.ifcolumn == false) {
      return (checkall = false);
    }
  });
  checkAll.value = checkall;
  isIndeterminate.value = !checkall;
  emits("getlistValue",list.value)
};

// 结束拖拽
const onEnd = () => {
  emits("getlistValue",list.value)
};

</script>

<template>
  <div>
    <el-tooltip :visible="visible" placement="bottom-end" effect="light">
      <template #content>
        <div class="s-head">
          <div class="name">
            <el-checkbox
              v-model="checkAll"
              :indeterminate="isIndeterminate"
              @change="handleCheckAllChange"
              >列展示</el-checkbox
            >
          </div>
        </div>
        <div class="s-content">
          <draggable
            v-model="list"
            animation="300"
            @end="onEnd"
            item-key="id"
          >
            <template #item="{ element, index }" :key="index" >
              <div class="item" >
                <el-icon :size="15" class="rank"><Rank /></el-icon>
                <el-checkbox
                  :label="element.label"
                  v-model="element.ifcolumn"
                  @change="CheckedChange"
                  >{{ element.label }}</el-checkbox
                >
              </div>
            </template>
          </draggable>
        </div>
      </template>
      <el-button  @click="visible = !visible">
      <el-icon><Setting /></el-icon>
      </el-button>
    </el-tooltip>
  </div>
</template>

<style scoped lang="scss">
.s-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #dedede;

  .rest {
    color: var(--el-color-primary);
    cursor: pointer;
  }
}

.s-content {
  width: 150px;
  .item {
    display: flex;
    align-items: center;
  }
}

.rank {
  margin: 8.5px 5px;
}

</style>

index.vue

<script setup>
import { ref, onMounted, computed } from "vue";
import { LocalStore } from "@/store/LocalStore";
import { useRouter } from "vue-router";
import ColsettingVue from "@/components/colsetting.vue";

const list = [
  {
    name: "张三",
    phone:'13012345678'
  },
];

//列设置
// 表格列内容
const columnList=ref([{
  prop:'name',
  label:'姓名',
  ifcolumn:true,
},
{
  prop:'phone',
  label:'手机号',
  ifcolumn:true,
}
])

// 列设置赋值
const getlistValue=(val)=>{
  columnList.value=val
}

</script>

<template>
  <div class="user">
    <!--表格-->
    <div class="list">
      <div class="table-tools">
        <div class="settings">
          <ColsettingVue
          :columnList="columnList"
          @getlistValue="getlistValue"
          />  
        </div>
        <el-button type="success" class="addButton">添加</el-button>
      </div>

      <el-table
        stripe
        :data="list"
        style="width: 100%"
        :cell-style="{ textAlign: 'center' }"
        :header-cell-style="{
          'text-align': 'center',
          background: '#ebeef5',
          'font-size': '15px',
        }"
      >
        <el-table-column type="index" label="序列号" width="80px" />
        
        <template v-for="(item,index) in columnList" :key="index"   >
          <el-table-column v-if="item.ifcolumn" :label="item.label" :prop="item.prop" />
        </template>
       
        <el-table-column fixed="right" label="操作">
          <template #default="scope">
            <el-button
              link
              type="primary"
              size="small"
              >查看记录</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<style scoped lang="scss">
.list {
    .table-tools {
      display: flex;
      justify-content: space-between;
      flex-direction: row-reverse;
      align-items: center;
    }

    .settings {
      color: #999;
      cursor: pointer;
      font-size: 18px;
      position: relative;

      :deep(.el-popper .is-light) {
        transform: (1380px 343px);
      }
    }
  }

</style>

这样就完成了拖拽设置列了，快去试试吧