使用vuex模仿el-table

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>

成果