element+vue table表格全部数据和已选数据联动

1.组件TableChoose

<template>
  <div class="tableChooseBox">
    <div class="tableRow">
      <div class="tableCard">
        <div class="tableHeadTip">全部{{ labelTitle }}</div>
        <slot name="body" />
      </div>
      <div class="tableCardBlank"></div>
      <div class="tableCard">
        <div class="tableHeadTip">已选择{{ labelTitle }}</div>
        <el-table
          ref="Table"
          :data="goodsList"
          border
          max-height="300px"
          :cell-style="$style.cellStyle"
          :header-cell-style="$style.rowClass"
          :row-key="getRowKeys"
          @select="select"
          @select-all="selectAll"
          @header-dragend="headerDragend"
        >
          <el-table-column
            label="选择"
            type="selection"
            align="center"
            reserve-selection
          ></el-table-column>
          <el-table-column
            v-for="item in goodsLabelList"
            :key="item.prop"
            :label="item.label"
            :prop="item.prop"
            :width="item.width"
            align="center"
          >
            <template slot-scope="scope">
              <span v-if="item.state">
                <el-tag v-if="scope.row.state == 0" type="danger">禁用</el-tag>
                <el-tag v-else-if="scope.row.state == 1" type="success"
                  >启用</el-tag
                >
              </span>
              <span v-else-if="item.type">
                <el-tag v-if="scope.row.type == 1">
                  {{ ROOM_TYPE[scope.row.type] }}</el-tag
                >
                <el-tag v-if="scope.row.type == 0" type="success">{{
                  ROOM_TYPE[scope.row.type]
                }}</el-tag>
              </span>
              <span v-else>{{ scope.row[item.prop] }}</span>
            </template></el-table-column
          >
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import tableMixin from "@/mixin/tableMixin";
import { getDictionaries, dictionaryConstants } from "@/utils/dictionaries";
export default {
  name: "TableChoose",
  props: ["goodsLabelList", "goodsList", "labelTitle", "id"],
  mixins: [tableMixin],
  components: {},
  data() {
    return {
       ROOM_TYPE:getDictionaries(dictionaryConstants.ROOM_TYPE.parentCode)
    };
  },
  computed: {},
  watch: {
    goodsList(n) {
      n.forEach((row) => {
        this.$refs.Table.toggleRowSelection(row, true);
      });
    },
  },
  methods: {
    // 确定唯一的key值
    getRowKeys(row) {
      return row[this.id];
    },
    select(selection, row) {
      this.$emit("changeChooseList", row, false);
    },
    selectAll(selection) {
      this.$emit("changeChooseList", {}, true);
    },
  },
};
</script>

<style lang="scss" scoped>
.tableChooseBox {
  width: 100%;
}
.tableRow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.tableCardBlank {
  width: 20px;
  height: 10px;
}
.tableCard {
  padding: 20px;
  box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.1);
  opacity: 1;
  border-radius: 10px;
  flex: 1;
  overflow: hidden;
  .tableHeadTip {
    font-size: 14px;
    font-weight: bold;
    line-height: 22px;
    color: rgba(0, 0, 0, 0.65);
    opacity: 1;
    margin-bottom: 10px;
    text-align: left;
  }
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128

2.页面使用

const goodsLabelList = [
  {
    label: "货主编号",
    prop: "id",
  },
  {
    label: "货主名称",
    prop: "storeName",
  },
  {
    label: "货主地址",
    prop: "addressAll",
  },
  {
    label: "货主电话",
    prop: "storePhone",
  },
];
import TableChoose from "@/components/TableExtend/TableChoose";
 <table-choose
              :goodsLabelList="goodsLabelList"
              :goodsList="GoodsChexkboxs"
              :labelTitle="labelTitle"
              id="id"
              @changeChooseList="changeChooseList"
            >
              <template slot="body">
                <el-table
                  :data="StoreList"
                  ref="GoodsTable"
                  border
                  max-height="350px"
                  :header-cell-style="$style.rowClass"
                  :row-key="getRowKeys"
                  @selection-change="GoodsHandleChange"
                  @header-dragend="headerDragend"
                  :cell-style="changeRowBgColorByIsPay"
                >
                  <el-table-column
                    label="选择"
                    type="selection"
                    align="center"
                    reserve-selection
                    :selectable="selectEnable"
                  ></el-table-column>
                  <el-table-column
                    v-for="item in goodsLabelList"
                    :key="item.prop"
                    :label="item.label"
                    :prop="item.prop"
                    align="center"
                    show-overflow-tooltip
                  ></el-table-column>
                </el-table>
              </template>
            </table-choose>

  // 根据状态 来 改变 行背景颜色
    changeRowBgColorByIsPay({ row, rowIndex }) {
      if (this.forbidden.some((item) => item === row.id)) {
        return "background-color:  rgba(230, 162, 60, 0.1) !important";
      }
    },
    //配置过的数据禁用
    selectEnable(row, rowIndex) {
      if (this.forbidden.some((item) => item === row.id)) {
        return false;
      } else {
        return true; // 不禁用
      }
    },
     changeChooseList(row, clearAll) {
      const GoodsTable = this.$refs.GoodsTable;
      if (clearAll) {
        GoodsTable.clearSelection();
      } else {
        GoodsTable.toggleRowSelection(row, false);
      }
    },
     submitForm() {
      var dataArr = [];
      if (this.GoodsChexkboxs.length === 0) {
        this.$notification("操作失败", "error", "请勾选货主数据");
        return;
      }
      for (let index = 0; index < this.GoodsChexkboxs.length; index++) {
        const element = this.GoodsChexkboxs[index];
        dataArr.push({
          qcExamineModeEnum: this.detail.qcExamineModeEnum,
          ownerCode: element.id,
          ownerId: element.id,
          ownerName: element.storeName,
        });
      }
      qcStoreInsert(dataArr).then((res) => {
        const { code, msg } = res.data;
        const title = code === 200 ? "操作成功" : "操作失败";
        const type = code === 200 ? "success" : "error";
        this.$notification(title, type, msg);
        if (code === 200) {
          this.popVisible = false;
          this.getQueryList();
        }
      });
    },
        GoodsHandleChange(selection) {
      this.GoodsChexkboxs = selection;
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108