表格添加滚动事件、表格拖拽 插件sortablejs

472 阅读1分钟
 handlerIsScroll() {
            this.$nextTick(() => {
                let tableEven = this.$refs.table.bodyWrapper;
                let scrollLeft = 0;
                tableEven.addEventListener("scroll", () => {
                    scrollLeft = this.$refs.table.bodyWrapper.scrollLeft;
                    scrollLeft > 0 ? (this.isPositionLeft = true) : (this.isPositionLeft = false);
                });
            });
        },

修改表格滚动条宽度

/deep/ .el-table{
   .el-table__body-wrapper::-webkit-scrollbar {
        height: 10px !important;
    }
    .el-table__fixed-body-wrapper {
        max-height: 410px !important;
    }
    }
  // 表格拖拽 插件sortablejs
        rowDrop() {
            // 此时找到的元素是要拖拽元素的父容器
            const tbody = document.querySelector(".drop-table .el-table__body-wrapper > table > tbody");
            const _this = this;
            this.tableSortable = Sortable.create(tbody, {
                //  指定父元素下可被拖拽的子元素
                draggable: ".el-table__row",
                filter: ".ignore-elements",
                preventOnFilter: false,
                scroll: true,
                animation: 0,
                onEnd({ newIndex, oldIndex }) {
                    const currRow = _this.evaluationList.list.splice(oldIndex, 1)[0];
                    _this.evaluationList.list.splice(newIndex, 0, currRow);
                    _this.evaluationList.list.map((item, index) => (item.sortNum = index + 1));
                },
            });
        },
//销毁
 this.tableSortable && this.tableSortable.destroy();