1、vuex
在main.js引入
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
// 定义要传递的数据
datas: []
},
mutations: {
// 定义修改数据的 mutation
SET_DATAS(state, newDatas) {
state.datas = newDatas;
}
},
actions: {
// 定义分发数据的 action
updateDatas({ 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 的父元素 tr
var 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>
成果