bri-components 1.5.13 → 1.5.15

package/src/components/list/DshBox/DshCrossTable.vue

@@ -1,827 +1,827 @@
-<template>
-    <div class="DshCrossTable">
-        <!-- 左 表头列 -->
-        <div
-            class="DshCrossTable-left"
-            :style="renderTableBoxStyle + `;width: ${propsObj.titleWidth ? propsObj.titleWidth : 160}px`"
-        >
-            <!-- 多选框 和 序号 -->
-            <div
-                v-if="selfPropsObj.showCheck && selfPropsObj.showIndex"
-                class="DshCrossTable-left-header"
-            >
-                <table
-                    cellspacing="0"
-                    cellpadding="0"
-                >
-                    <!-- 多选框 -->
-                    <tr
-                        v-if="selfPropsObj.showCheck"
-                        class="DshCrossTable-row"
-                    >
-                        <td
-                            class="DshCrossTable-col DshCrossTable-col-checkbox"
-                            :style="{
-                                background: '#f4f4f4',
-                            }"
-                        >
-                            <Checkbox
-                                v-model="isSelectAll"
-                                @on-change="selectAll"
-                            ></Checkbox>
-                        </td>
-                    </tr>
-
-                    <!-- 序号 -->
-                    <tr
-                        v-if="selfPropsObj.showIndex"
-                        class="DshCrossTable-row"
-                    >
-                        <td
-                            class="DshCrossTable-col DshCrossTable-col-index"
-                            :style="{
-                                background: '#f4f4f4',
-                            }"
-                        >
-                            <div class="td-content">序号</div>
-                        </td>
-                    </tr>
-                </table>
-            </div>
-
-            <!-- 表头s -->
-            <div class="DshCrossTable-left-body">
-                <div :style="{
-                    height: '10000px'
-                }">
-                    <table
-                        cellspacing="0"
-                        cellpadding="0"
-                    >
-                        <!-- 头部 -->
-                        <tr
-                            v-for="colItem in columnList.filter(colItem => colItem.isHead === true)"
-                            :key="colItem._key"
-                        >
-                            <td
-                                class="DshCrossTable-col DshCrossTable-col-content"
-                                :style="{
-                                    background: '#f4f4f4',
-                                    textAlign: 'center',
-                                    fontWeight: 500
-                                }"
-                            >
-                                <bri-tooltip
-                                    transfer
-                                    :content="colItem.title"
-                                >
-                                    <div class="td-content dsh-ellipsis">
-                                        {{ colItem.title }}
-                                    </div>
-                                </bri-tooltip>
-                            </td>
-                        </tr>
-
-                        <!-- 字段项 -->
-                        <tr
-                            v-for="colItem in columnList.filter(colItem => !colItem.isHead)"
-                            :key="colItem._key"
-                        >
-                            <td
-                                class="DshCrossTable-col DshCrossTable-col-content"
-                                :style="{
-                                    background: '#F7F9FD',
-                                    display: 'flex',
-                                    width: (propsObj.titleWidth ? propsObj.titleWidth : 160)+ 'px'
-                                }"
-                            >
-                                <bri-tooltip
-                                    style="width: calc(100% - 16px)"
-                                    :content="colItem.title"
-                                    transfer
-                                >
-                                    <div class="td-content dsh-ellipsis">
-                                        <slot
-                                            name="col"
-                                            :col="colItem"
-                                        >
-                                            <div
-                                                v-if="changedFields.includes(colItem._key)"
-                                                class="crossTable-col"
-                                            >
-                                                <span class="crossTable-col-title">{{ colItem.title }}</span>
-                                                <span class="crossTable-col-sign">变更</span>
-                                            </div>
-
-                                            <template v-else>
-                                                {{ colItem.title }}
-                                            </template>
-                                        </slot>
-                                    </div>
-                                </bri-tooltip>
-
-                                <Tooltip
-                                    v-if="colItem._description"
-                                    style="width:16px"
-                                    :content="colItem._description"
-                                    placement="top-start"
-                                    max-width="200"
-                                    :transfer="true"
-                                >
-                                    <Icon
-                                        type="ios-help-circle-outline"
-                                        size="16"
-                                    />
-                                </Tooltip>
-                            </td>
-                        </tr>
-                    </table>
-                </div>
-            </div>
-
-            <!-- 操作 -->
-            <div
-                v-if="operationColumn && selfPropsObj.showAction"
-                class="DshCrossTable-left-footer"
-            >
-                <table
-                    cellspacing="0"
-                    cellpadding="0"
-                >
-                    <tr class="DshCrossTable-row">
-                        <td
-                            class="DshCrossTable-col DshCrossTable-col-operation"
-                            :style="{
-                                background: '#f4f4f4'
-                            }"
-                        >
-                            <div class="td-content">{{ operationColumn.title }}</div>
-                        </td>
-                    </tr>
-                </table>
-            </div>
-        </div>
-
-        <!-- 右 -数据 -->
-        <div
-            ref="DshCrossTable-right"
-            id="DshCrossTable-right"
-            :style="renderTableBoxStyle"
-            class="DshCrossTable-right"
-        >
-            <!-- 多选框 和 序号 -->
-            <div
-                v-if="selfPropsObj.showCheck && selfPropsObj.showIndex"
-                class="DshCrossTable-right-header"
-            >
-                <table
-                    cellspacing="0"
-                    cellpadding="0"
-                    :style="{
-                        width: rowWidth + 10 + 'px',
-                    }"
-                >
-                    <!-- 多选框 -->
-                    <tr
-                        v-if="selfPropsObj.showCheck"
-                        class="DshCrossTable-row"
-                    >
-                        <CheckboxGroup
-                            v-model="selectIds"
-                            @on-change="select"
-                            style="height:40px"
-                        >
-                            <td
-                                v-for="(dataItem, dataIndex) in data"
-                                :key="dataItem._id"
-                                class="DshCrossTable-td-checkbox"
-                                :style="{
-                                    width: colWidth ? colWidth + 'px' : '200px',
-                                    background: '#f4f4f4',
-                                    textAlign: 'center'
-                                }"
-                            >
-                                <Checkbox
-                                    class="td-content"
-                                    style="display: inline-block; width: 100%;"
-                                    :label="dataItem._id"
-                                    @click.native="clickRowCheckbox(dataItem, dataIndex)"
-                                >{{ "" }}</Checkbox>
-                            </td>
-                        </CheckboxGroup>
-                    </tr>
-
-                    <!-- 序号 -->
-                    <tr v-if="selfPropsObj.showIndex">
-                        <td
-                            v-for="(dataItem, dataIndex) in data"
-                            :key="dataItem._id"
-                            class="DshCrossTable-td-index"
-                            :style="{
-                                width: colWidth ? colWidth + 'px' : '200px',
-                                background: '#f4f4f4',
-                                textAlign: 'center'
-                            }"
-                            @click="clickRow(dataItem, dataIndex)"
-                        >
-                            <div class="td-content">{{ dataIndex + 1 }}</div>
-                        </td>
-                    </tr>
-                </table>
-            </div>
-
-            <!-- 内容 -->
-            <div
-                v-if="showTable"
-                class="DshCrossTable-right-body"
-                :style="showScrollX === false ? {
-                    overflowX: 'hidden'
-                } : {}"
-                @scroll="tableScroll($event)"
-            >
-                <!-- 无数据 -->
-                <div
-                    v-if="!data.length"
-                    class="dsh-subtip"
-                >{{ noDataText }}</div>
-
-                <!-- 存在数据 -->
-                <table
-                    v-else
-                    cellspacing="0"
-                    cellpadding="0"
-                    :style="{
-                        width: rowWidth + 'px'
-                    }"
-                >
-                    <!-- 头部 -->
-                    <tr
-                        v-for="colItem in columnList.filter(colItem => colItem.isHead === true)"
-                        :key="colItem._key"
-                    >
-                        <td
-                            v-for="dataItem in data"
-                            :key="dataItem._id"
-                            class="DshCrossTable-td-content"
-                            :style="{
-                                width: colWidth ? colWidth + 'px' : '200px',
-                                background: '#f4f4f4',
-                                textAlign: 'center',
-                                fontWeight: 500
-                            }"
-                        >
-                            <div class="td-content">
-                                {{ dataItem[colItem._key] }}
-                            </div>
-                        </td>
-                    </tr>
-
-                    <!-- 字段项 -->
-                    <tr
-                        v-for="(colItem, colIndex) in columnList.filter(colItem => !colItem.isHead)"
-                        :key="colItem._key"
-                    >
-                        <td
-                            v-for="(dataItem, dataIndex) in data"
-                            :key="dataItem._id"
-                            class="DshCrossTable-td-content"
-                            :style="{
-                                width: colWidth ? colWidth + 'px' : '200px',
-                                background: changedFields.includes(colItem._key) && data.length === 2 && dataIndex === 1
-                                    ? '#FFECED'
-                                    : dataIndex % 2 === 0 ?  '' : '#F7F9FD',
-                                color: changedFields.includes(colItem._key) && data.length === 2 && dataIndex === 1 ? 'red' : undefined
-                            }"
-                            @click="clickRow(dataItem, dataIndex)"
-                        >
-                            <div
-                                v-if="colItem.renderBodyCell"
-                                class="td-content"
-                            >
-                                <dsh-list-render
-                                    :row="dataItem"
-                                    :index="dataIndex"
-                                    :render="colItem.renderBodyCell"
-                                ></dsh-list-render>
-                            </div>
-
-                            <div
-                                v-else-if="colItem.formatter"
-                                class="td-content"
-                                v-html="colItem.formatter(dataItem, colIndex, 0, colItem._key)"
-                            ></div>
-
-                            <div
-                                v-else
-                                class="td-content"
-                            >{{ dataItem[colItem._key] }}</div>
-                        </td>
-                    </tr>
-                </table>
-            </div>
-
-            <!-- 操作 -->
-            <div
-                v-if="operationColumn && selfPropsObj.showAction"
-                class="DshCrossTable-right-footer"
-            >
-                <table
-                    cellspacing="0"
-                    cellpadding="0"
-                    :style="{
-                        width: rowWidth + 10 + 'px'
-                    }"
-                >
-                    <tr class="DshCrossTable-row">
-                        <td
-                            v-for="(dataItem, dataIndex) in data"
-                            :key="dataItem._id"
-                            class="DshCrossTable-td-operation"
-                            :style="{
-                                width: colWidth ? colWidth + 'px' : '200px',
-                                background: '#f4f4f4',
-                            }"
-                        >
-                            <div class="td-content">
-                                <dsh-list-render
-                                    :row="dataItem"
-                                    :index="dataIndex"
-                                    :render="operationColumn.renderBodyCell"
-                                ></dsh-list-render>
-                            </div>
-                        </td>
-                    </tr>
-                </table>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-    import elementResizeDetectorMaker from "element-resize-detector";
-
-    export default {
-        name: "DshCrossTable",
-        props: {
-            data: {
-                type: Array,
-                default () {
-                    return [];
-                }
-            },
-            columns: {
-                type: Array,
-                default () {
-                    return [];
-                }
-            },
-            propsObj: {
-                type: Object,
-                default () {
-                    return {};
-                }
-            },
-            operationList: {
-                type: Array,
-                default () {
-                    return [];
-                }
-            },
-
-            noDataText: {
-                type: String,
-                default: "暂无数据…"
-            },
-            changedFields: {
-                type: Array,
-                default () {
-                    return [];
-                }
-            }
-        },
-        data () {
-            return {
-                selections: [],
-                // curRow: null // 可以不声明
-
-                allChecked: false,
-                selectionList: [],
-                rowWidth: 0,
-                colWidth: 0,
-                titleWidth: 200,
-                showScrollX: false,
-                showTable: false,
-                currentPage: 1,
-                pagesize: 10,
-                pagesizeOpts: [50, 30, 20, 15, 10], // pagesize选择下拉
-                showTotal: true,
-                total: 0,
-                pageHeightScreen: [5, 10, 15] // 根据大中小屏，设置内部height，pagesize最多出现几个然后滚动
-            };
-        },
-        computed: {
-            selfPropsObj () {
-                return {
-                    showCheck: true,
-                    showIndex: true,
-                    showAction: true,
-                    ...this.propsObj
-                };
-            },
-            columnList () {
-                return this.columns;
-            },
-            operationColumn () {
-                return {
-                    title: "操作",
-                    _key: "__operation__",
-                    key: "__operation__",
-                    field: "__operation__",
-                    width: 150,
-                    renderBodyCell: (params, h) => {
-                        return this.operationList.length < 3
-                            ? h("dsh-buttons", {
-                                props: {
-                                    list: this.operationList
-                                },
-                                on: {
-                                    click: (operationItem) => {
-                                        this.$dshEmit(operationItem, params.row, params.row);
-                                    }
-                                }
-                            })
-                            : h("div", {
-                                style: {
-                                    display: "flex",
-                                    justifyContent: "center"
-                                }
-                            }, [
-                                h("dsh-buttons", {
-                                    style: {
-                                        display: "inline-block"
-                                    },
-                                    props: {
-                                        list: this.operationList.slice(0, 2)
-                                    },
-                                    on: {
-                                        click: (operationItem) => {
-                                            this.$dshEmit(operationItem, params.row, params.row);
-                                        }
-                                    }
-                                }),
-                                h("dsh-dropdown", {
-                                    props: {
-                                        dropdownObj: {
-                                            icon: "ios-more",
-                                            size: 22,
-                                            color: "#E9ECF4",
-                                            showDropdownItemIcon: false
-                                        },
-                                        list: this.operationList.slice(2)
-                                    },
-                                    on: {
-                                        click: (operationItem) => {
-                                            this.$dshEmit(operationItem, params.row, params.row);
-                                        }
-                                    }
-                                }, [
-                                    h("dsh-buttons", {
-                                        props: {
-                                            list: [
-                                                {
-                                                    name: "更多>>",
-                                                    type: "more",
-                                                    btnType: "text",
-                                                    size: "small"
-                                                }
-                                            ]
-                                        }
-                                    })
-                                ])
-                        ]);
-                    }
-                };
-            },
-            renderTableBoxStyle () {
-                let styleStr = "";
-                if (this.tableExpend) {
-                    styleStr += "padding-bottom:38px;";
-                } else {
-                    styleStr += "padding-bottom:0px;";
-                }
-                if (this.tableSelection && this.tableIndex) {
-                    styleStr += "padding-top:77px";
-                } else if (this.tableSelection || this.tableIndex) {
-                    styleStr += "padding-top:39px";
-                } else {
-                    styleStr += "padding-top:0px";
-                }
-                return styleStr;
-            },
-            selectIds: {
-                get () {
-                    return this.selections.map(item => item._id);
-                },
-                set (val) {
-                    this.selections = this.data.filter(item => val.includes(item._id));
-                }
-            },
-            isSelectAll: {
-                get () {
-                    return this.data.length > 0 && this.selectIds.length === this.data.length;
-                },
-                set (bool) {
-                    this.selections = bool ? this.data : [];
-                }
-            }
-
-        },
-        created () {},
-        mounted () {
-            this.init();
-        },
-        methods: {
-            // 初始化
-            init () {
-                this.initTableData();
-            },
-            initTableData () {
-                // dom加载完成之后设置主要内容区域的宽，并且绑定监测滚动事件
-                this.$nextTick(() => {
-                    this.initTableWidth();
-                });
-            },
-            initTableWidth () {
-                // 创建实例，无参数
-                let erd = elementResizeDetectorMaker();
-                // 创建实例带参数
-                /* let erdUltraFast = elementResizeDetectorMaker({
-                    strategy: "scroll",
-                    callOnAdd: true,
-                    debug: true
-                }); */
-                // 监听id为CrossTable-right的元素 大小变化
-                let that = this;
-                erd.listenTo(document.getElementById("DshCrossTable-right"), function (element) {
-                    // 计算宽度
-                    let tableWidth = that.$refs["DshCrossTable-right"].clientWidth - 10;
-                    let nums = tableWidth / 200;
-                    let dataTotal = that.data.length;
-                    if (nums >= dataTotal) {
-                        that.rowWidth = tableWidth;
-                        that.colWidth = tableWidth / dataTotal;
-                        that.showScrollX = false;
-                    } else {
-                        that.rowWidth = dataTotal * 200;
-                        that.showScrollX = true;
-                    }
-
-                    // that.rowWidth = 200 * that.data.length;
-                    /* if (that.selfPropsObj.colWidth === "half") { //
-                        that.colWidth = (tableWidth - 10) / dataTotal;
-                    } */
-
-                    that.showTable = true;
-                });
-            },
-            // 竖向滚动监测,赋值给左侧表头滚动，保持同步
-            tableScroll (event) {
-                const leftEle = document.getElementsByClassName("DshCrossTable-left")[0]; // 左侧内容表头
-                const leftBodyEle = document.getElementsByClassName("DshCrossTable-left-body")[0]; // 左侧
-                const rightHeaderEle = document.getElementsByClassName("DshCrossTable-right-header")[0] || {}; // 右头
-                const rightFooterEle = document.getElementsByClassName("DshCrossTable-right-footer")[0] || {}; // 右低
-
-                // 上下滚动
-                leftBodyEle.scrollTop = event.srcElement.scrollTop;
-                if (this.selfPropsObj.showCheck && this.selfPropsObj.showIndex) {
-                    if (event.srcElement.scrollTop !== 0) {
-                        rightHeaderEle.style.boxShadow = "0px 0px 5px 0px #dddddd";
-                        rightFooterEle.style.boxShadow = "0px 0px 5px 0px #dddddd";
-                    } else {
-                        rightHeaderEle.style.boxShadow = rightFooterEle.style.boxShadow = "none";
-                    }
-                }
-
-                // 左右滚动
-                rightHeaderEle.scrollLeft = rightFooterEle.scrollLeft = event.srcElement.scrollLeft;
-                if (event.srcElement.scrollLeft !== 0) {
-                    leftEle.style.boxShadow = "0px 0px 3px 0px #dddddd";
-                } else {
-                    leftEle.style.boxShadow = "none";
-                }
-            },
-
-            // 点击某行
-            clickRow (row) {
-                this.$emit("clickRow", row);
-            },
-            // 点击某行的选择框
-            clickRowCheckbox (row) {
-                this.curRow = row;
-                this.curRow.bool = !this.selectIds.includes(row._id);
-            },
-            // 切换全选
-            selectAll (bool) {
-                this.$emit("selectAll", this.selectIds, this.selections, bool);
-                this.changeSelect();
-            },
-            // 切换选择
-            select (selectIds) {
-                this.$emit("select", this.selectIds, this.selections, this.curRow, this.curRow.bool);
-                this.changeSelect();
-            },
-            // 改变选择项
-            changeSelect () {
-                this.$emit("changeSelect", this.selectIds, this.selections);
-            }
-        },
-        watch: {
-            data (newVal, oldVal) {
-                this.init();
-            }
-        }
-    };
-</script>
-
-<style lang="less">
-    .DshCrossTable {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        flex-direction: row;
-
-        &-left,
-        &-right {
-            border-top: 1px solid #eeeeee;
-            border-bottom: 1px solid #eeeeee;
-            overflow: hidden;
-            display: flex;
-            flex-direction: column;
-
-            &-header {
-                width: 100%;
-            }
-
-            &-body {
-                width: 100%;
-                flex: 1;
-                min-height: 0px;
-                overflow: scroll;
-            }
-
-            &-footer {
-                width: 100%;
-                height: 38px;
-            }
-        }
-
-        &-left {
-            width: 160px;
-            height: 100%;
-            border-left: 1px solid #eeeeee;
-            border-right: 1px solid #eeeeee;
-            // background: #F7F9FD;
-            z-index: 2;
-
-            &-header {
-                overflow: hidden;
-            }
-
-            &-body {
-                overflow: hidden;
-            }
-
-            &-footer {
-                overflow: hidden;
-            }
-        }
-
-        &-right {
-            flex: 1;
-            min-width: 0px;
-            height: 100%;
-            border-right: 1px solid #eeeeee;
-
-            &-header {
-                overflow: hidden;
-            }
-
-            &-body {
-                overflow: scroll;
-            }
-
-            &-footer {
-                overflow: hidden;
-            }
-        }
-
-        &-row {
-            // height: 40px;
-        }
-
-        &-col {
-            font-weight: bold;
-            color: #5D5D5D;
-
-            &-checkbox,
-            &-index,
-            &-operation {}
-
-            &-Checkbox {}
-
-            &-index {}
-
-            &-content {
-                .crossTable-col {
-                    width: 100%;
-                    .dsh-flex-row-center-center();
-
-                    &-title {
-                        flex: 1;
-                        min-width: 0px;
-                        height: 100%;
-                        .dsh-ellipsis();
-                    }
-
-                    &-sign {
-                        #dsh-sign-change();
-                    }
-                }
-            }
-
-            &-operation {}
-        }
-
-        &-td {
-
-            &-checkbox,
-            &-index,
-            &-operation {}
-
-            &-Checkbox {}
-
-            &-index {}
-
-            &-content {}
-
-            &-operation {}
-        }
-
-        table {
-            width: 100%;
-
-            tr {
-                height: 39px;
-                font-size: 12px;
-                overflow: hidden;
-
-                td {
-                    display: inline-block;
-                    width: 200px;
-                    height: 40px;
-                    line-height: 40px;
-                    padding: 0 10px;
-                    border-right: 1px solid #EDEDED;
-                    border-bottom: 1px solid #EDEDED;
-                    cursor: pointer;
-                    overflow: hidden;
-
-                    .td-content {
-                        width: 100%;
-                        height: 100%;
-                        padding: 8px 0px;
-                        line-height: 22px;
-                        vertical-align: middle;
-                    }
-                }
-            }
-        }
-
-        .cross-table-box {
-            height: 38px;
-            padding: 7px 0;
-
-            &-content {
-                width: auto;
-                border-radius: 2px;
-                border: 1px solid #6daef2;
-                font-size: 12px !important;
-                color: #6DAEF2;
-                cursor: pointer;
-                height: 24px;
-                display: inline-block;
-                line-height: 24px;
-                padding: 0 5px;
-                overflow: hidden;
-                word-break: keep-all;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-
-                i {
-                    margin-right: 5px;
-                    font-size: 12px !important;
-                }
-            }
-        }
-    }
-</style>
+<template>
+    <div class="DshCrossTable">
+        <!-- 左 表头列 -->
+        <div
+            class="DshCrossTable-left"
+            :style="renderTableBoxStyle + `;width: ${propsObj.titleWidth ? propsObj.titleWidth : 160}px`"
+        >
+            <!-- 多选框 和 序号 -->
+            <div
+                v-if="selfPropsObj.showCheck && selfPropsObj.showIndex"
+                class="DshCrossTable-left-header"
+            >
+                <table
+                    cellspacing="0"
+                    cellpadding="0"
+                >
+                    <!-- 多选框 -->
+                    <tr
+                        v-if="selfPropsObj.showCheck"
+                        class="DshCrossTable-row"
+                    >
+                        <td
+                            class="DshCrossTable-col DshCrossTable-col-checkbox"
+                            :style="{
+                                background: '#f4f4f4',
+                            }"
+                        >
+                            <Checkbox
+                                v-model="isSelectAll"
+                                @on-change="selectAll"
+                            ></Checkbox>
+                        </td>
+                    </tr>
+
+                    <!-- 序号 -->
+                    <tr
+                        v-if="selfPropsObj.showIndex"
+                        class="DshCrossTable-row"
+                    >
+                        <td
+                            class="DshCrossTable-col DshCrossTable-col-index"
+                            :style="{
+                                background: '#f4f4f4',
+                            }"
+                        >
+                            <div class="td-content">序号</div>
+                        </td>
+                    </tr>
+                </table>
+            </div>
+
+            <!-- 表头s -->
+            <div class="DshCrossTable-left-body">
+                <div :style="{
+                    height: '10000px'
+                }">
+                    <table
+                        cellspacing="0"
+                        cellpadding="0"
+                    >
+                        <!-- 头部 -->
+                        <tr
+                            v-for="colItem in columnList.filter(colItem => colItem.isHead === true)"
+                            :key="colItem._key"
+                        >
+                            <td
+                                class="DshCrossTable-col DshCrossTable-col-content"
+                                :style="{
+                                    background: '#f4f4f4',
+                                    textAlign: 'center',
+                                    fontWeight: 500
+                                }"
+                            >
+                                <bri-tooltip
+                                    transfer
+                                    :content="colItem.title"
+                                >
+                                    <div class="td-content dsh-ellipsis">
+                                        {{ colItem.title }}
+                                    </div>
+                                </bri-tooltip>
+                            </td>
+                        </tr>
+
+                        <!-- 字段项 -->
+                        <tr
+                            v-for="colItem in columnList.filter(colItem => !colItem.isHead)"
+                            :key="colItem._key"
+                        >
+                            <td
+                                class="DshCrossTable-col DshCrossTable-col-content"
+                                :style="{
+                                    background: '#F7F9FD',
+                                    display: 'flex',
+                                    width: (propsObj.titleWidth ? propsObj.titleWidth : 160)+ 'px'
+                                }"
+                            >
+                                <bri-tooltip
+                                    style="width: calc(100% - 16px)"
+                                    :content="colItem.title"
+                                    transfer
+                                >
+                                    <div class="td-content dsh-ellipsis">
+                                        <slot
+                                            name="col"
+                                            :col="colItem"
+                                        >
+                                            <div
+                                                v-if="changedFields.includes(colItem._key)"
+                                                class="crossTable-col"
+                                            >
+                                                <span class="crossTable-col-title">{{ colItem.title }}</span>
+                                                <span class="crossTable-col-sign">变更</span>
+                                            </div>
+
+                                            <template v-else>
+                                                {{ colItem.title }}
+                                            </template>
+                                        </slot>
+                                    </div>
+                                </bri-tooltip>
+
+                                <Tooltip
+                                    v-if="colItem._description"
+                                    style="width:16px"
+                                    :content="colItem._description"
+                                    placement="top-start"
+                                    max-width="200"
+                                    :transfer="true"
+                                >
+                                    <Icon
+                                        type="ios-help-circle-outline"
+                                        size="16"
+                                    />
+                                </Tooltip>
+                            </td>
+                        </tr>
+                    </table>
+                </div>
+            </div>
+
+            <!-- 操作 -->
+            <div
+                v-if="operationColumn && selfPropsObj.showAction"
+                class="DshCrossTable-left-footer"
+            >
+                <table
+                    cellspacing="0"
+                    cellpadding="0"
+                >
+                    <tr class="DshCrossTable-row">
+                        <td
+                            class="DshCrossTable-col DshCrossTable-col-operation"
+                            :style="{
+                                background: '#f4f4f4'
+                            }"
+                        >
+                            <div class="td-content">{{ operationColumn.title }}</div>
+                        </td>
+                    </tr>
+                </table>
+            </div>
+        </div>
+
+        <!-- 右 -数据 -->
+        <div
+            ref="DshCrossTable-right"
+            id="DshCrossTable-right"
+            :style="renderTableBoxStyle"
+            class="DshCrossTable-right"
+        >
+            <!-- 多选框 和 序号 -->
+            <div
+                v-if="selfPropsObj.showCheck && selfPropsObj.showIndex"
+                class="DshCrossTable-right-header"
+            >
+                <table
+                    cellspacing="0"
+                    cellpadding="0"
+                    :style="{
+                        width: rowWidth + 10 + 'px',
+                    }"
+                >
+                    <!-- 多选框 -->
+                    <tr
+                        v-if="selfPropsObj.showCheck"
+                        class="DshCrossTable-row"
+                    >
+                        <CheckboxGroup
+                            v-model="selectIds"
+                            @on-change="select"
+                            style="height:40px"
+                        >
+                            <td
+                                v-for="(dataItem, dataIndex) in data"
+                                :key="dataItem._id"
+                                class="DshCrossTable-td-checkbox"
+                                :style="{
+                                    width: colWidth ? colWidth + 'px' : '200px',
+                                    background: '#f4f4f4',
+                                    textAlign: 'center'
+                                }"
+                            >
+                                <Checkbox
+                                    class="td-content"
+                                    style="display: inline-block; width: 100%;"
+                                    :label="dataItem._id"
+                                    @click.native="clickRowCheckbox(dataItem, dataIndex)"
+                                >{{ "" }}</Checkbox>
+                            </td>
+                        </CheckboxGroup>
+                    </tr>
+
+                    <!-- 序号 -->
+                    <tr v-if="selfPropsObj.showIndex">
+                        <td
+                            v-for="(dataItem, dataIndex) in data"
+                            :key="dataItem._id"
+                            class="DshCrossTable-td-index"
+                            :style="{
+                                width: colWidth ? colWidth + 'px' : '200px',
+                                background: '#f4f4f4',
+                                textAlign: 'center'
+                            }"
+                            @click="clickRow(dataItem, dataIndex)"
+                        >
+                            <div class="td-content">{{ dataIndex + 1 }}</div>
+                        </td>
+                    </tr>
+                </table>
+            </div>
+
+            <!-- 内容 -->
+            <div
+                v-if="showTable"
+                class="DshCrossTable-right-body"
+                :style="showScrollX === false ? {
+                    overflowX: 'hidden'
+                } : {}"
+                @scroll="tableScroll($event)"
+            >
+                <!-- 无数据 -->
+                <div
+                    v-if="!data.length"
+                    class="dsh-subtip"
+                >{{ noDataText }}</div>
+
+                <!-- 存在数据 -->
+                <table
+                    v-else
+                    cellspacing="0"
+                    cellpadding="0"
+                    :style="{
+                        width: rowWidth + 'px'
+                    }"
+                >
+                    <!-- 头部 -->
+                    <tr
+                        v-for="colItem in columnList.filter(colItem => colItem.isHead === true)"
+                        :key="colItem._key"
+                    >
+                        <td
+                            v-for="dataItem in data"
+                            :key="dataItem._id"
+                            class="DshCrossTable-td-content"
+                            :style="{
+                                width: colWidth ? colWidth + 'px' : '200px',
+                                background: '#f4f4f4',
+                                textAlign: 'center',
+                                fontWeight: 500
+                            }"
+                        >
+                            <div class="td-content">
+                                {{ dataItem[colItem._key] }}
+                            </div>
+                        </td>
+                    </tr>
+
+                    <!-- 字段项 -->
+                    <tr
+                        v-for="(colItem, colIndex) in columnList.filter(colItem => !colItem.isHead)"
+                        :key="colItem._key"
+                    >
+                        <td
+                            v-for="(dataItem, dataIndex) in data"
+                            :key="dataItem._id"
+                            class="DshCrossTable-td-content"
+                            :style="{
+                                width: colWidth ? colWidth + 'px' : '200px',
+                                background: changedFields.includes(colItem._key) && data.length === 2 && dataIndex === 1
+                                    ? '#FFECED'
+                                    : dataIndex % 2 === 0 ?  '' : '#F7F9FD',
+                                color: changedFields.includes(colItem._key) && data.length === 2 && dataIndex === 1 ? 'red' : undefined
+                            }"
+                            @click="clickRow(dataItem, dataIndex)"
+                        >
+                            <div
+                                v-if="colItem.renderBodyCell"
+                                class="td-content"
+                            >
+                                <dsh-list-render
+                                    :row="dataItem"
+                                    :index="dataIndex"
+                                    :render="colItem.renderBodyCell"
+                                ></dsh-list-render>
+                            </div>
+
+                            <div
+                                v-else-if="colItem.formatter"
+                                class="td-content"
+                                v-html="colItem.formatter(dataItem, colIndex, 0, colItem._key)"
+                            ></div>
+
+                            <div
+                                v-else
+                                class="td-content"
+                            >{{ dataItem[colItem._key] }}</div>
+                        </td>
+                    </tr>
+                </table>
+            </div>
+
+            <!-- 操作 -->
+            <div
+                v-if="operationColumn && selfPropsObj.showAction"
+                class="DshCrossTable-right-footer"
+            >
+                <table
+                    cellspacing="0"
+                    cellpadding="0"
+                    :style="{
+                        width: rowWidth + 10 + 'px'
+                    }"
+                >
+                    <tr class="DshCrossTable-row">
+                        <td
+                            v-for="(dataItem, dataIndex) in data"
+                            :key="dataItem._id"
+                            class="DshCrossTable-td-operation"
+                            :style="{
+                                width: colWidth ? colWidth + 'px' : '200px',
+                                background: '#f4f4f4',
+                            }"
+                        >
+                            <div class="td-content">
+                                <dsh-list-render
+                                    :row="dataItem"
+                                    :index="dataIndex"
+                                    :render="operationColumn.renderBodyCell"
+                                ></dsh-list-render>
+                            </div>
+                        </td>
+                    </tr>
+                </table>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import elementResizeDetectorMaker from "element-resize-detector";
+
+    export default {
+        name: "DshCrossTable",
+        props: {
+            data: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            columns: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+            propsObj: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            },
+            operationList: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            },
+
+            noDataText: {
+                type: String,
+                default: "暂无数据…"
+            },
+            changedFields: {
+                type: Array,
+                default () {
+                    return [];
+                }
+            }
+        },
+        data () {
+            return {
+                selections: [],
+                // curRow: null // 可以不声明
+
+                allChecked: false,
+                selectionList: [],
+                rowWidth: 0,
+                colWidth: 0,
+                titleWidth: 200,
+                showScrollX: false,
+                showTable: false,
+                currentPage: 1,
+                pagesize: 10,
+                pagesizeOpts: [50, 30, 20, 15, 10], // pagesize选择下拉
+                showTotal: true,
+                total: 0,
+                pageHeightScreen: [5, 10, 15] // 根据大中小屏，设置内部height，pagesize最多出现几个然后滚动
+            };
+        },
+        computed: {
+            selfPropsObj () {
+                return {
+                    showCheck: true,
+                    showIndex: true,
+                    showAction: true,
+                    ...this.propsObj
+                };
+            },
+            columnList () {
+                return this.columns;
+            },
+            operationColumn () {
+                return {
+                    title: "操作",
+                    _key: "__operation__",
+                    key: "__operation__",
+                    field: "__operation__",
+                    width: 150,
+                    renderBodyCell: (params, h) => {
+                        return this.operationList.length < 3
+                            ? h("dsh-buttons", {
+                                props: {
+                                    list: this.operationList
+                                },
+                                on: {
+                                    click: (operationItem) => {
+                                        this.$dshEmit(operationItem, params.row, params.row);
+                                    }
+                                }
+                            })
+                            : h("div", {
+                                style: {
+                                    display: "flex",
+                                    justifyContent: "center"
+                                }
+                            }, [
+                                h("dsh-buttons", {
+                                    style: {
+                                        display: "inline-block"
+                                    },
+                                    props: {
+                                        list: this.operationList.slice(0, 2)
+                                    },
+                                    on: {
+                                        click: (operationItem) => {
+                                            this.$dshEmit(operationItem, params.row, params.row);
+                                        }
+                                    }
+                                }),
+                                h("dsh-dropdown", {
+                                    props: {
+                                        dropdownObj: {
+                                            icon: "ios-more",
+                                            size: 22,
+                                            color: "#E9ECF4",
+                                            showDropdownItemIcon: false
+                                        },
+                                        list: this.operationList.slice(2)
+                                    },
+                                    on: {
+                                        click: (operationItem) => {
+                                            this.$dshEmit(operationItem, params.row, params.row);
+                                        }
+                                    }
+                                }, [
+                                    h("dsh-buttons", {
+                                        props: {
+                                            list: [
+                                                {
+                                                    name: "更多>>",
+                                                    type: "more",
+                                                    btnType: "text",
+                                                    size: "small"
+                                                }
+                                            ]
+                                        }
+                                    })
+                                ])
+                        ]);
+                    }
+                };
+            },
+            renderTableBoxStyle () {
+                let styleStr = "";
+                if (this.tableExpend) {
+                    styleStr += "padding-bottom:38px;";
+                } else {
+                    styleStr += "padding-bottom:0px;";
+                }
+                if (this.tableSelection && this.tableIndex) {
+                    styleStr += "padding-top:77px";
+                } else if (this.tableSelection || this.tableIndex) {
+                    styleStr += "padding-top:39px";
+                } else {
+                    styleStr += "padding-top:0px";
+                }
+                return styleStr;
+            },
+            selectIds: {
+                get () {
+                    return this.selections.map(item => item._id);
+                },
+                set (val) {
+                    this.selections = this.data.filter(item => val.includes(item._id));
+                }
+            },
+            isSelectAll: {
+                get () {
+                    return this.data.length > 0 && this.selectIds.length === this.data.length;
+                },
+                set (bool) {
+                    this.selections = bool ? this.data : [];
+                }
+            }
+
+        },
+        created () {},
+        mounted () {
+            this.init();
+        },
+        methods: {
+            // 初始化
+            init () {
+                this.initTableData();
+            },
+            initTableData () {
+                // dom加载完成之后设置主要内容区域的宽，并且绑定监测滚动事件
+                this.$nextTick(() => {
+                    this.initTableWidth();
+                });
+            },
+            initTableWidth () {
+                // 创建实例，无参数
+                let erd = elementResizeDetectorMaker();
+                // 创建实例带参数
+                /* let erdUltraFast = elementResizeDetectorMaker({
+                    strategy: "scroll",
+                    callOnAdd: true,
+                    debug: true
+                }); */
+                // 监听id为CrossTable-right的元素 大小变化
+                let that = this;
+                erd.listenTo(document.getElementById("DshCrossTable-right"), function (element) {
+                    // 计算宽度
+                    let tableWidth = that.$refs["DshCrossTable-right"].clientWidth - 10;
+                    let nums = tableWidth / 200;
+                    let dataTotal = that.data.length;
+                    if (nums >= dataTotal) {
+                        that.rowWidth = tableWidth;
+                        that.colWidth = tableWidth / dataTotal;
+                        that.showScrollX = false;
+                    } else {
+                        that.rowWidth = dataTotal * 200;
+                        that.showScrollX = true;
+                    }
+
+                    // that.rowWidth = 200 * that.data.length;
+                    /* if (that.selfPropsObj.colWidth === "half") { //
+                        that.colWidth = (tableWidth - 10) / dataTotal;
+                    } */
+
+                    that.showTable = true;
+                });
+            },
+            // 竖向滚动监测,赋值给左侧表头滚动，保持同步
+            tableScroll (event) {
+                const leftEle = document.getElementsByClassName("DshCrossTable-left")[0]; // 左侧内容表头
+                const leftBodyEle = document.getElementsByClassName("DshCrossTable-left-body")[0]; // 左侧
+                const rightHeaderEle = document.getElementsByClassName("DshCrossTable-right-header")[0] || {}; // 右头
+                const rightFooterEle = document.getElementsByClassName("DshCrossTable-right-footer")[0] || {}; // 右低
+
+                // 上下滚动
+                leftBodyEle.scrollTop = event.srcElement.scrollTop;
+                if (this.selfPropsObj.showCheck && this.selfPropsObj.showIndex) {
+                    if (event.srcElement.scrollTop !== 0) {
+                        rightHeaderEle.style.boxShadow = "0px 0px 5px 0px #dddddd";
+                        rightFooterEle.style.boxShadow = "0px 0px 5px 0px #dddddd";
+                    } else {
+                        rightHeaderEle.style.boxShadow = rightFooterEle.style.boxShadow = "none";
+                    }
+                }
+
+                // 左右滚动
+                rightHeaderEle.scrollLeft = rightFooterEle.scrollLeft = event.srcElement.scrollLeft;
+                if (event.srcElement.scrollLeft !== 0) {
+                    leftEle.style.boxShadow = "0px 0px 3px 0px #dddddd";
+                } else {
+                    leftEle.style.boxShadow = "none";
+                }
+            },
+
+            // 点击某行
+            clickRow (row) {
+                this.$emit("clickRow", row);
+            },
+            // 点击某行的选择框
+            clickRowCheckbox (row) {
+                this.curRow = row;
+                this.curRow.bool = !this.selectIds.includes(row._id);
+            },
+            // 切换全选
+            selectAll (bool) {
+                this.$emit("selectAll", this.selectIds, this.selections, bool);
+                this.changeSelect();
+            },
+            // 切换选择
+            select (selectIds) {
+                this.$emit("select", this.selectIds, this.selections, this.curRow, this.curRow.bool);
+                this.changeSelect();
+            },
+            // 改变选择项
+            changeSelect () {
+                this.$emit("changeSelect", this.selectIds, this.selections);
+            }
+        },
+        watch: {
+            data (newVal, oldVal) {
+                this.init();
+            }
+        }
+    };
+</script>
+
+<style lang="less">
+    .DshCrossTable {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: row;
+
+        &-left,
+        &-right {
+            border-top: 1px solid #eeeeee;
+            border-bottom: 1px solid #eeeeee;
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+
+            &-header {
+                width: 100%;
+            }
+
+            &-body {
+                width: 100%;
+                flex: 1;
+                min-height: 0px;
+                overflow: scroll;
+            }
+
+            &-footer {
+                width: 100%;
+                height: 38px;
+            }
+        }
+
+        &-left {
+            width: 160px;
+            height: 100%;
+            border-left: 1px solid #eeeeee;
+            border-right: 1px solid #eeeeee;
+            // background: #F7F9FD;
+            z-index: 2;
+
+            &-header {
+                overflow: hidden;
+            }
+
+            &-body {
+                overflow: hidden;
+            }
+
+            &-footer {
+                overflow: hidden;
+            }
+        }
+
+        &-right {
+            flex: 1;
+            min-width: 0px;
+            height: 100%;
+            border-right: 1px solid #eeeeee;
+
+            &-header {
+                overflow: hidden;
+            }
+
+            &-body {
+                overflow: scroll;
+            }
+
+            &-footer {
+                overflow: hidden;
+            }
+        }
+
+        &-row {
+            // height: 40px;
+        }
+
+        &-col {
+            font-weight: bold;
+            color: #5D5D5D;
+
+            &-checkbox,
+            &-index,
+            &-operation {}
+
+            &-Checkbox {}
+
+            &-index {}
+
+            &-content {
+                .crossTable-col {
+                    width: 100%;
+                    .dsh-flex-row-center-center();
+
+                    &-title {
+                        flex: 1;
+                        min-width: 0px;
+                        height: 100%;
+                        .dsh-ellipsis();
+                    }
+
+                    &-sign {
+                        #dsh-sign-change();
+                    }
+                }
+            }
+
+            &-operation {}
+        }
+
+        &-td {
+
+            &-checkbox,
+            &-index,
+            &-operation {}
+
+            &-Checkbox {}
+
+            &-index {}
+
+            &-content {}
+
+            &-operation {}
+        }
+
+        table {
+            width: 100%;
+
+            tr {
+                height: 39px;
+                font-size: 12px;
+                overflow: hidden;
+
+                td {
+                    display: inline-block;
+                    width: 200px;
+                    height: 40px;
+                    line-height: 40px;
+                    padding: 0 10px;
+                    border-right: 1px solid #EDEDED;
+                    border-bottom: 1px solid #EDEDED;
+                    cursor: pointer;
+                    overflow: hidden;
+
+                    .td-content {
+                        width: 100%;
+                        height: 100%;
+                        padding: 8px 0px;
+                        line-height: 22px;
+                        vertical-align: middle;
+                    }
+                }
+            }
+        }
+
+        .cross-table-box {
+            height: 38px;
+            padding: 7px 0;
+
+            &-content {
+                width: auto;
+                border-radius: 2px;
+                border: 1px solid #6daef2;
+                font-size: 12px !important;
+                color: #6DAEF2;
+                cursor: pointer;
+                height: 24px;
+                display: inline-block;
+                line-height: 24px;
+                padding: 0 5px;
+                overflow: hidden;
+                word-break: keep-all;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+
+                i {
+                    margin-right: 5px;
+                    font-size: 12px !important;
+                }
+            }
+        }
+    }
+</style>