yos_web/src/components/selectTable/index.vue

<template>
  <div>
    <el-table ref="tables"  @select="aaaa" @select-all="selectAll" v-loading="loading" highlight-current-row :data="data" size="mini" :height="height" style="width:100%"  border>
        <el-table-column
        type="selection"
        width="45"
        align="center"
        fixed>
      </el-table-column>
      <el-table-column v-for="col in layout" :key="col.tablecolid" :prop="col.columnname" :label="col.title" :width="col.width" :fixed="col.columnname === fixedName?'right':false">
        <template slot-scope="scope">
          <!-- 自定义表格显示内容 -->
          <slot v-if="custom" name="customcol" :column="{data:scope.row,columnname:col.columnname}"></slot>
          <!-- 否则就是默认 -->
          <span v-else>{{scope.row[col.columnname]}}</span>
          <!-- 操作结构内容 -->
          <slot v-if="col.columnname === 'operation'" name="opreation" :data="scope.row"></slot>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {mapGetters} from "vuex"
export default {
  /*
    layout:表结构数据;
    data:表渲染数据;
    custom:是否启用自定义结构;
    opwidth:操作列宽度
  */
  props:['layout','data','custom','height','fixedName','idName'],
  data () {
    return {
      list:[],
      allArr:[]
    }
  },
  computed:{
    ...mapGetters({
      loading:'loading'
    })
  },
  watch: {
    data (val) {
      this.data.forEach((row) => {
        this.allArr.forEach(item => {
          if (row[this.idName] == item[this.idName]) {
            this.$nextTick(() => {
              this.$refs["tables"].toggleRowSelection(row, true);
            })
          }
        })
      });    
    },
    allArr (val) {
      this.$emit('upDateData',val)
    }
  },
  methods:{
    aaaa(e,a) {
      let index = this.allArr.findIndex(v=>v[this.idName] == a[this.idName])
      if(index == -1) {
        this.allArr.push(a)
      } else {
        this.allArr.splice(index,1)
      }
      console.log(this.allArr);
      this.$emit('selectChange',this.allArr)
    },
    selectAll (val) {
      if (val.length == 0) {
        this.data.forEach(item => {
          this.allArr.splice(item,1)
        })
      } else {
        val.forEach(item => {
          let res = this.allArr.every(item2 => item[this.idName] != item2[this.idName])
          res ? this.allArr.push(item) : ''
        })
      }
    },
  },
}

</script>
<style scoped>

/deep/.el-table__header .DisableSelection > .cell {
  display: none !important;
}
</style>