1、vuex
在main.js引入
import Vue from 'vue';
import Vuex from 'vuex';Vue.use(Vuex);const store = new Vuex.Store({state: {// 定义要传递的数据datas: []},mutations: {// 定义修改数据的 mutationSET_DATAS(state, newDatas) {state.datas = newDatas;}},actions: {// 定义分发数据的 actionupdateDatas({ commit }, datas) {commit('SET_DATAS', datas);}}
});export default store;2、index.vue
<template><div><div><div @click="dades">加100条</div><wb-table style="width: 99%;margin-left: 2px;" :parentValue='datas' :slotPropsValue='parentValue' heights="50"><dade label="选择" width="200"></dade><dade label="项目" width="200"></dade><dade label="项目2" width="200"></dade><dade label="项目3" width="200" v-slot="{item}">{{item.id}}</dade><dade label="项目4"></dade></wb-table><wb-table style="width: 99%;margin-left: 2px;" :parentValue='datasc' :slotPropsValue='parentValue' heights="50"><dade label="选择" width="200"></dade><dade label="项目66" width="200"></dade><dade label="项目2" width="200"></dade><dade label="项目3" width="200" v-slot="{item}">{{item.id}}</dade><dade label="项目4"></dade></wb-table></div></div>
</template><script>export default {components: {},data() {return {isDragging: false,dadeType:false,dadeType2:false,dadeType3:false,startX: 0,startY: 0,currentX: 0,currentY: 0,dragSpeed: 5, /* 调整拖动速度 */width:"",height:"",datas:[{"id":11},{"id":1266}],datasc:[{"id":1199},{"id":369}]};},watch: {},//界面没出来前加载created() {},mounted() {},computed: {},methods: {//点击体dades(){console.log(this.$store.state.datas)let list = {"id":1}for(let i=1;i<1;i++){this.datas.push(list)}},}
};
</script><style scoped>.dade{-webkit-box-shadow: 0 2px 0px 0 rgba(0,0,0,.1);box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);}.draggable-div {position: absolute;}
</style>3、wb-table
<template><div class="dadegdt" :style="{ 'height': heights + 'vh' }"><table cellspacing="0"><thead><tr style="background-color: rgb(245, 247, 250);"><td v-for="(it, index) in tableTd" :key="index" v-if="it.name == '选择'" :style="{ 'width': it.width + 'px' }"><el-checkbox v-model="checkboxs" @change="checkdoxs(checkboxs)"></el-checkbox></td><td v-for="(it, index) in tableTd" :key="index" v-if="it.name != '选择'" :style="{ 'width': it.width + 'px' }">{{ it.name }}</td></tr></thead><tbody :class="['dadeInput',bottons]"><tr v-for="(it,index) in $store.state.datas[uid]" :key="index" :id="index" :uid="uid"><slot></slot></tr><!-- 使用底部合计传bottons="bottons，<wb-table bottons="bottons"> --><tr v-if="bottons == 'bottons'" style="background-color: white"><td v-for="(it, index) in tableTd" :key="index" :style="{ 'width': it.width + 'px' }"><span v-if="it.key">{{it.sum}}</span><span v-if="it.name == '操作'">合计</span></td></tr></tbody></table></div>
</template>
<script>
export default {components: {},props: {bottons:'',parentValue: [],dadeindex: 0,fuCheckdoxs: {},datas: [],heights:"",billkindFn: {},},watch: {// 更新选择parentValue: {handler(newValue, oldValue) {if(this.uid == undefined || this.uid == ""){this.uids();}this.$store.state.datas[this.uid] = newValue;},immediate: true, // 如果希望在组件创建时立即触发一次监听函数，可以设置为 true},billkindFn(newValue) {if (newValue) {this.processSlotsData()// 获得高度let defaults = this.$slots.default[0];this.heights = defaults.data.attrs.heights}}},data() {return {checkboxs: false,name: '',dade: [{ "id": 1 }],tableTd: [],heights: "",widths: "",uid:"",};},created() {},mounted() {// 处理头部导航this.processSlotsData()},methods: {uids(){// 生成唯一const timestamp = new Date().getTime();const randomPart = Math.floor(Math.random() * 1000000);this.uid = timestamp+""+randomPart;console.log(this.uid)},clickdade(index) {this.dadeindex = index;},//父组件调用更新选中getUser(e) {this.checkboxs = e;},processSlotsData() {if (this.$slots.default) {this.tableTd = [];let data = this.$slots.default;data.forEach(req => {// 一级标签if (req.data && req.componentOptions.tag === "dade") {let key = "";if(req.data.attrs.sum != undefined){key = req.data.attrs.sum}this.tableTd.push({ "name": req.data.attrs.label, 'width': req.data.attrs.width, 'key': key, sum:0});}});}}}
};
</script>
</script><style scoped>
/* 最后一行浮动 */
.bottons tr:last-child {position: sticky;bottom: 0px;background-color: white;z-index: 200;transition: height 0.3s ease;
}
/* 固定头部 */
thead {position: sticky;top: 0px;background-color: white;z-index: 200;transition: height 0.3s ease;
}table,
tbody {border: 0;line-height: 30px;border-spacing: 0;border-collapse: collapse;cursor: default;
}/* 滚动条 */
tbody {display: block;/* overflow-y: scroll; */
}table thead,
tbody tr {display: table;width: 99.9%;table-layout: fixed;
}table {text-align: center;color: #000;
}td {padding-left: 2px;
}tr,
td {border-top: 1px solid #ebefee;border-left: 1px solid #ebefee;border-right: 1px solid #ebefee;
}/* 给最后一行加样式 */
table tr:last-child td {border-bottom: 1px solid #ebefee;
}/* tr{overflow-y: scroll;} */
/* tbody{overflow-y: scroll;} */
.dadegdt {width: 100%;overflow: auto;/* overflow-x:auto; *//* overflow-x: scroll; */
}.td_width {width: 50px;
}.td_width2 {width: 60px;
}tbody td {max-width: 1500px;min-width: 60px;word-wrap:break-word;text-overflow: ellipsis;white-space: nowrap;
}tbody td:hover {white-space: normal;/* overflow:auto; */padding-left: 0px;
}.dade {/* 初始状态的样式background-color: white;color: black;/* 添加过渡效果，这里设置为 0.3 秒内平滑过渡 */transition: all 0.1s ease;
}.dade:hover {background-color: #dcf4fa;
}.dade[data-v-a83bd3b0] {-webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}.dadeInput>>>.el-input__inner {text-align: center;
}
</style>4、dade.vue
<template><td ref="myTd">{{dataFromStore}}<slot :item="dataFromStore"></slot></td>
</template><script>export default {computed: {},data() {return {dataFromStore: []};},mounted() {// 获取 td 元素// var td = document.getElementById('targetTd');const td = this.$refs.myTd;// 获取 td 的父元素 trvar tr = td.parentElement;console.log(tr.getAttribute("uid"))console.log(6666)this.dataFromStore = this.$store.state.datas[tr.getAttribute("uid")][tr.id]// console.log(this.dataFromStore)}}
</script><style>
</style>成果
