快盘下载:好资源、好软件、快快下载吧!

快盘排行|快盘最新

当前位置:首页软件教程电脑软件教程 → vue3-ts-使用vuedraggable动态设置el-table列的显示与隐藏并且可以随意拖地排序(element-plus-)

vue3-ts-使用vuedraggable动态设置el-table列的显示与隐藏并且可以随意拖地排序(element-plus-)

时间:2022-09-23 11:10:19人气:作者:快盘下载我要评论

1、此功能已集成到TTable组件中

2、最终效果;基于element-plus 的 el-table组件;

vue3-ts-使用vuedraggable动态设置el-table列的显示与隐藏并且可以随意拖地排序(element-plus-)

TTable组件使用;只需要设置两个参数;

columnSetting // 是否显示列设置按钮
name=;TtableColumnSet; // 区分储存本地表头数据;保证其唯一性;

具体代码如下

<template>
  <el-dropdown trigger=;click;>
    <el-button icon=;Setting; size=;default;>列设置</el-button>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item>
          <span class=;title;>列设置</span>
          <Draggable class=;t_table_column_setting_dropdown; v-model=;state.columnSet; item-key=;prop;>
            <template #item=;{element,index};>
              <el-checkbox :checked=;!element.hidden; ;click.native.stop :disabled=;element.checkBoxDisabled;
                ;change=;checked => checkChanged(checked, index);>
                {{element.label}}
              </el-checkbox>
            </template>
          </Draggable>
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>
<script lang=;ts;>
export default {
  name: ;ColumnSet;
}
</script>
<script setup lang=;ts;>
import Draggable from ;vuedraggable;
import { watch, onMounted, reactive } from ;vue;
const props = defineProps({
  columns: {
    type: Array,
    default: () => []
  },
  title: {
    type: String,
    default: ;;
  },
  name: {
    type: String,
    default: ;;
  }
})
// 初始化
const initColumnSet = () => {
  const columnSet = props.columns.map((col: any, index) => ({
    label: col.label,
    prop: col.prop,
    hidden: false,
    checkBoxDisabled: false
  }))
  return columnSet
}
// 获取缓存数据
const getColumnSetCache = () => {
  const value = localStorage.getItem(;t-ui-plus:TTable.columnSet-${props.name || props.title};)
  return value ? JSON.parse(value) : initColumnSet()
}
// 抛出事件
const emits = defineEmits([;columnSetting;])
const state: any = reactive({
  columnSet: []
})
onMounted(() => {
  state.columnSet = getColumnSetCache()
  // console.log(;onMounted;, state.columnSet)
  emits(;columnSetting;, state.columnSet)
})
watch(
  () => state.columnSet,
  (val) => {
    emits(;columnSetting;, val)
    // console.log(3333, val)
    localStorage.setItem(;t-ui-plus:TTable.columnSet-${props.name || props.title};, JSON.stringify(val))
  },
  { deep: true }
)
// checkbox改变选中状态
const checkChanged = (checked, index) => {
  state.columnSet[index].hidden = !checked
  let obj: any = {}
  state.columnSet.map(val => {
    val.hidden in obj || (obj[val.hidden] = [])
    obj[val.hidden].push(val.hidden)
  })
  if (obj.false.length < 2) {
    state.columnSet.map((val, key) => {
      if (!val.hidden) {
        state.columnSet[key].checkBoxDisabled = true
      }
    })
  } else {
    state.columnSet.map((val, key) => {
      if (!val.hidden) {
        state.columnSet[key].checkBoxDisabled = false
      }
    })
  }
}

</script>
<style lang=;scss;>
.el-dropdown-menu {
  padding: 10px;
  font-size: 14px;
  .el-dropdown-menu__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    .title {
      font-weight: bold;
      margin-bottom: 5px;
    }
    .t_table_column_setting_dropdown {
      display: flex;
      flex-direction: column;
      max-height: 300px;
      Overflow-y: auto;
      .el-checkbox {
        .el-checkbox__input.is-checked;.el-checkbox__label {
          color: #262626;
        }
      }
    }
  }
}
</style>

注意点

vue2 的实现可以查看这篇

vue3使用需要下载最新版本(官方使用示例)

 npm i -S vuedraggable;next  
 & 
 yarn add vuedraggable;next

组件地址

gitHub组件地址

gitee码云组件地址

相关文章

基于ElementUi再次封装基础组件文档

相关文章

  • Vue3---Pinia-状态管理(环境搭建安装及各属性使用教程)详细使用教程

    Vue3---Pinia-状态管理(环境搭建安装及各属性使用教程)详细使用教程,vue3 状态管理工具 pinia 使用,Vue3状态管理之Pinia的入门使用教程,Pinia使用详解(vue3默认状态管理),详解Vue3状态管理库Pinia的使用方法,Vue3 使用Pinia状态管理,vue3新一代状态管理器 — pinia的学习与使用,vue3使用pinia管理状态,vue3全家桶之-状态管理器pinia的使用,Vue3中Pinia的基本使用,上手Vue 新的状态管理 Pinia,一篇文章就够了,Pi...
  • 用echarts生成的华容道状态关系图

    用echarts生成的华容道状态关系图,某位朋友研究华容道, 于是受到启发, 用echarts做一个可视化的华容道状态关系图。...

网友评论

快盘下载暂未开通留言功能。

关于我们| 广告联络| 联系我们| 网站帮助| 免责声明| 软件发布

Copyright 2019-2029 【快快下载吧】 版权所有 快快下载吧 | 豫ICP备10006759号公安备案:41010502004165

声明: 快快下载吧上的所有软件和资料来源于互联网,仅供学习和研究使用,请测试后自行销毁,如有侵犯你版权的,请来信指出,本站将立即改正。