|
|
@@ -0,0 +1,779 @@
|
|
|
+<template>
|
|
|
+ <div class="operateTable">
|
|
|
+ <el-dropdown
|
|
|
+ size="small"
|
|
|
+ trigger="click"
|
|
|
+ v-if="options.columnsSelect || options.columnsTreeSelect"
|
|
|
+ class="column-dropdown"
|
|
|
+ >
|
|
|
+ <el-button style="padding: 9px 10px!important" size="small">
|
|
|
+ <i style="font-size: 12px" class="el-icon-menu"></i>
|
|
|
+ <i class="el-icon-arrow-down el-icon--right"></i>
|
|
|
+ </el-button>
|
|
|
+ <el-dropdown-menu slot="dropdown">
|
|
|
+ <div style="margin:10px;" class="caoz_ft_warp" v-if="isInit||isSave">
|
|
|
+ <el-button
|
|
|
+ v-if="isInit"
|
|
|
+ size="small"
|
|
|
+ type="primary"
|
|
|
+ plain
|
|
|
+ style="width:70px;"
|
|
|
+ @click="initColumns(true)"
|
|
|
+ >初始化</el-button>
|
|
|
+ <el-button
|
|
|
+ v-if="isSave"
|
|
|
+ size="small"
|
|
|
+ type="primary"
|
|
|
+ plain
|
|
|
+ style="width:70px;"
|
|
|
+ @click="$emit('saveSettingColumns',checkedList)"
|
|
|
+ >保存</el-button>
|
|
|
+ </div>
|
|
|
+ <div style="margin:10px;" class="caoz_ft_warp">
|
|
|
+ <el-input size="small" placeholder="请输入关键字" v-model="cloumnKeyword" clearable></el-input>
|
|
|
+ </div>
|
|
|
+ <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange" style="padding-left:10px;">Select All</el-checkbox>
|
|
|
+ <el-checkbox-group
|
|
|
+ v-if="!options.columnsTreeSelect"
|
|
|
+ v-model="checkedList"
|
|
|
+ style="max-height: 300px"
|
|
|
+ @change="handleCheckedCitiesChange"
|
|
|
+ >
|
|
|
+ <div class="checkboxScorll">
|
|
|
+ <template v-for="(option, index) in checkBoxOptions">
|
|
|
+ <template v-if="cloumnKeyword && option.toLowerCase().indexOf(cloumnKeyword.toLowerCase())>-1">
|
|
|
+ <el-checkbox
|
|
|
+ :key="index"
|
|
|
+ class="checkbox"
|
|
|
+ :label="option"
|
|
|
+ ></el-checkbox>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="!cloumnKeyword">
|
|
|
+ <el-checkbox
|
|
|
+ :key="index"
|
|
|
+ class="checkbox"
|
|
|
+ :label="option"
|
|
|
+ ></el-checkbox>
|
|
|
+ </template>
|
|
|
+ <template v-else></template>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </el-checkbox-group>
|
|
|
+ <div v-else class="checkboxTree">
|
|
|
+ <el-tree
|
|
|
+ ref="tree"
|
|
|
+ :check-on-click-node="true"
|
|
|
+ :data="treeColumn"
|
|
|
+ show-checkbox
|
|
|
+ node-key="label"
|
|
|
+ :default-expanded-keys="defaultExpanded"
|
|
|
+ :default-checked-keys="defaultChecked"
|
|
|
+ :props="{
|
|
|
+ children: 'children',
|
|
|
+ label: 'label',
|
|
|
+ }"
|
|
|
+ @check="checkChange"
|
|
|
+ style="max-height: 300px; overflow-y: auto"
|
|
|
+ >
|
|
|
+ </el-tree>
|
|
|
+ </div>
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </el-dropdown>
|
|
|
+ <el-table
|
|
|
+ id="iTable"
|
|
|
+ ref="operateTable"
|
|
|
+ border
|
|
|
+ :data="dataSource"
|
|
|
+ :stripe="options.stripe"
|
|
|
+ :highlight-current-row="options.highlightCurrentRow"
|
|
|
+ :max-height="options.maxHeight"
|
|
|
+ :size="options.size"
|
|
|
+ :fit="options.fit"
|
|
|
+ :show-header="options.showHeader"
|
|
|
+ :empty-text="options.emptyText"
|
|
|
+ :default-sort="options.defaultSort"
|
|
|
+ :row-key="getRowKeys"
|
|
|
+ :default-expand-all="options.defaultExpandAll"
|
|
|
+ :tree-props="options.treeProps"
|
|
|
+ :lazy="options.lazy"
|
|
|
+ :load="load"
|
|
|
+ @cell-mouse-enter="cellMouseEnter"
|
|
|
+ @cell-mouse-leave="cellMouseLeave"
|
|
|
+ @cell-click="cellClick"
|
|
|
+ @cell-dblclick="cellDblclick"
|
|
|
+ @row-click="rowClick"
|
|
|
+ @row-contextmenu="rowContextmenu"
|
|
|
+ @row-dblclick="rowDblclick"
|
|
|
+ @header-click="headerClick"
|
|
|
+ @header-contextmenu="headerContextmenu"
|
|
|
+ @sort-change="sortChange"
|
|
|
+ @select="select"
|
|
|
+ @select-all="selectAll"
|
|
|
+ @selection-change="checkboxSelected"
|
|
|
+ @filter-change="filterChange"
|
|
|
+ >
|
|
|
+ <slot name="expandRow"></slot>
|
|
|
+ <!-- 复选框 -->
|
|
|
+ <el-table-column
|
|
|
+ :reserve-selection="options.reserveSelection"
|
|
|
+ :key="0"
|
|
|
+ type="selection"
|
|
|
+ :selectable="selectable"
|
|
|
+ width="40"
|
|
|
+ align="left"
|
|
|
+ v-if="options.showCheckBox"
|
|
|
+ :resizable="false"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ ref="fixedColumn"
|
|
|
+ label="操作"
|
|
|
+ align="left"
|
|
|
+ :width="operates.dropDown ? '50' : operates.width"
|
|
|
+ :fixed="operates.fixed"
|
|
|
+ :min-width="operates.minwidth"
|
|
|
+ :resizable="operates.resizable"
|
|
|
+ v-if="operates.list.length > 0"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <!-- 操作列 不折叠 全为icon-->
|
|
|
+ <div
|
|
|
+ class="operate-group"
|
|
|
+ v-if="!operates.dropDown && !operates.isText"
|
|
|
+ >
|
|
|
+ <template
|
|
|
+ v-for="item in operates.list[0] instanceof Array
|
|
|
+ ? operates.list[scope.$index]
|
|
|
+ : operates.list"
|
|
|
+ >
|
|
|
+ <div class="item" v-if="item.show" :key="item.id">
|
|
|
+ <el-switch
|
|
|
+ v-if="item.type === 'switch'"
|
|
|
+ v-model="scope.row[item.prop]"
|
|
|
+ active-color="#13ce66"
|
|
|
+ @change="item.method(scope.$index, scope.row)"
|
|
|
+ ></el-switch>
|
|
|
+ <el-tooltip
|
|
|
+ v-else-if="item.type === 'tooltipIcon'"
|
|
|
+ :enterable="false"
|
|
|
+ effect="light"
|
|
|
+ placement="bottom"
|
|
|
+ >
|
|
|
+ <div slot="content">{{ item.tooltip }}</div>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ plain
|
|
|
+ :icon="item.icon"
|
|
|
+ size="mini"
|
|
|
+ :disabled="item.disabled"
|
|
|
+ @click="item.method(scope.$index, scope.row)"
|
|
|
+ ></el-button>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-button
|
|
|
+ v-else-if="item.type === 'icon'"
|
|
|
+ type="primary"
|
|
|
+ plain
|
|
|
+ :icon="item.icon"
|
|
|
+ size="mini"
|
|
|
+ :disabled="item.disabled"
|
|
|
+ @click="item.method(scope.$index, scope.row)"
|
|
|
+ ></el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <!-- 操作列 不折叠 全为文字-->
|
|
|
+ <div
|
|
|
+ class="operate-group"
|
|
|
+ v-if="!operates.dropDown && operates.isText"
|
|
|
+ >
|
|
|
+ <template
|
|
|
+ v-for="item in operates.list[0] instanceof Array
|
|
|
+ ? operates.list[scope.$index]
|
|
|
+ : operates.list"
|
|
|
+ >
|
|
|
+ <div class="item" v-if="item.show" :key="item.id">
|
|
|
+ <el-button
|
|
|
+ size="small"
|
|
|
+ type="text"
|
|
|
+ :disabled="item.disabled"
|
|
|
+ @click.native.prevent="item.method(scope.$index, scope.row)"
|
|
|
+ >{{ item.label }}</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <!-- 操作列 折叠下拉-->
|
|
|
+ <div class="operate-group" v-else-if="operates.dropDown">
|
|
|
+ <el-dropdown
|
|
|
+ @command="handleCommand"
|
|
|
+ trigger="hover"
|
|
|
+ placement="bottom-start"
|
|
|
+ >
|
|
|
+ <span class="el-dropdown-link">
|
|
|
+ <i class="el-icon-s-unfold" style="font-size: 16px;"></i>
|
|
|
+ </span>
|
|
|
+ <!-- 根据operates.list 来渲染操作列下拉的内容 -->
|
|
|
+ <el-dropdown-menu slot="dropdown">
|
|
|
+ <el-dropdown-item
|
|
|
+ v-for="(item, index) in operates.list[0] instanceof Array
|
|
|
+ ? operates.list[scope.$index]
|
|
|
+ : operates.list"
|
|
|
+ :disabled="item.disabled"
|
|
|
+ :key="index"
|
|
|
+ :command="composeValue(item, scope.row, scope.$index)"
|
|
|
+ >{{ item.label }}</el-dropdown-item
|
|
|
+ >
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </el-dropdown>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <!--region 数据列-->
|
|
|
+ <template v-for="column in columns">
|
|
|
+ <!-- :filter-method="column.filters ? column.filterMethod : undefined" -->
|
|
|
+ <!-- v-if="
|
|
|
+ options.columnsSelect || options.columnsTreeSelect
|
|
|
+ ? checkedList.includes(column.label)
|
|
|
+ : true
|
|
|
+ " -->
|
|
|
+ <el-table-column
|
|
|
+ v-if="
|
|
|
+ options.columnsSelect || options.columnsTreeSelect
|
|
|
+ ? checkedList.includes(column.label)
|
|
|
+ : true
|
|
|
+ "
|
|
|
+ :prop="column.prop"
|
|
|
+ :key="column.label"
|
|
|
+ :label="column.label"
|
|
|
+ align="left"
|
|
|
+ :width="column.width"
|
|
|
+ :min-width="column.minwidth"
|
|
|
+ :resizable="column.resizable"
|
|
|
+ :sortable="column.sortable"
|
|
|
+ :filters="column.filters"
|
|
|
+ :filter-method="column.filters ? column.filterMethod : undefined"
|
|
|
+ :filtered-value="column.filteredValue"
|
|
|
+ :fixed="column.fixed"
|
|
|
+ :column-key="column.prop"
|
|
|
+ >
|
|
|
+ <template slot="header" slot-scope="scope"
|
|
|
+ >{{ column.label }}
|
|
|
+ <TableHeaderRender
|
|
|
+ v-if="column.filterInput"
|
|
|
+ :columnProp="column.prop"
|
|
|
+ :tableColumn="scope.column"
|
|
|
+ :defaultValue="column.defaultValue"
|
|
|
+ :inputFilteredMap="inputFilteredMap"
|
|
|
+ @filterInputMethod="filterInputMethod"
|
|
|
+ @resetChangeMethod="resetChangeMethod"
|
|
|
+ ></TableHeaderRender>
|
|
|
+ </template>
|
|
|
+ <!-- :filtered-value="column.filteredValue" -->
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <!-- 如果传进来的column没有render函数执行以下代码 -->
|
|
|
+ <template v-if="!column.render">
|
|
|
+ <!-- 如果传进来的column没有render函数但有formatter函数执行以下代码 -->
|
|
|
+ <template v-if="column.formatter">
|
|
|
+ <span v-html="column.formatter(scope.row, column)"></span>
|
|
|
+ </template>
|
|
|
+ <!-- 如果传进来的column既没有render函数也没有formatter函数执行以下代码 -->
|
|
|
+ <template v-else>
|
|
|
+ <span>{{ scope.row[column.prop] }}</span>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ <!-- 如果传进来的column有render函数执行以下代码 -->
|
|
|
+ <template v-else>
|
|
|
+ <expand-dom
|
|
|
+ :column="column"
|
|
|
+ :row="scope.row"
|
|
|
+ :render="column.render"
|
|
|
+ :index="scope.$index"
|
|
|
+ ></expand-dom>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </template>
|
|
|
+ <!--endregion-->
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import TableHeaderRender from "./TableHeaderRender.vue";
|
|
|
+export default {
|
|
|
+ name: "OperateTable",
|
|
|
+ props: {
|
|
|
+ // 表格的数据源
|
|
|
+ dataSource: {
|
|
|
+ type: Array,
|
|
|
+ default: () => [],
|
|
|
+ },
|
|
|
+ // 需要展示的列
|
|
|
+ columns: {
|
|
|
+ type: Array,
|
|
|
+ default: () => [{}],
|
|
|
+ },
|
|
|
+ // table 表格的控制参数
|
|
|
+ options: {
|
|
|
+ type: Object,
|
|
|
+ default: () => {
|
|
|
+ return {
|
|
|
+ stripe: true, // 是否为斑马纹 table
|
|
|
+ };
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // 操作按钮组 === label: 文本，show：是否显示，icon：按钮图标，disabled：是否禁用，method：回调方法, 等等
|
|
|
+ operates: {
|
|
|
+ type: Object,
|
|
|
+ default: () => {
|
|
|
+ return {
|
|
|
+ list: [],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ },
|
|
|
+ defaultSelectedColumn: {
|
|
|
+ type: Array,
|
|
|
+ default: () => [],
|
|
|
+ },
|
|
|
+ defaultColumn: {
|
|
|
+ type: Array,
|
|
|
+ default: () => [],
|
|
|
+ },
|
|
|
+ totalColumn: {
|
|
|
+ type: Array,
|
|
|
+ default: () => [],
|
|
|
+ },
|
|
|
+ treeColumn: {
|
|
|
+ type: Array,
|
|
|
+ default: () => [],
|
|
|
+ },
|
|
|
+ defaultChecked: {
|
|
|
+ type: Array,
|
|
|
+ default: () => [],
|
|
|
+ },
|
|
|
+ defaultExpanded: {
|
|
|
+ type: Array,
|
|
|
+ default: () => [],
|
|
|
+ },
|
|
|
+ isInit: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ isSave: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ TableHeaderRender,
|
|
|
+ expandDom: {
|
|
|
+ functional: true,
|
|
|
+ props: {
|
|
|
+ row: Object,
|
|
|
+ render: Function,
|
|
|
+ index: Number,
|
|
|
+ column: {
|
|
|
+ type: Object,
|
|
|
+ default: null,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ render: (h, ctx) => {
|
|
|
+ const params = {
|
|
|
+ row: ctx.props.row,
|
|
|
+ index: ctx.props.index,
|
|
|
+ };
|
|
|
+ if (ctx.props.column) params.column = ctx.props.column;
|
|
|
+ return ctx.props.render(h, params);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ cloumnKeyword:"",//字段关键字搜索
|
|
|
+ isIndeterminate:true,//全选状态
|
|
|
+ checkAll:false,//字段全选
|
|
|
+ checkBoxOptions: [], // 全部表头
|
|
|
+ checkedList: [], // 选中表头
|
|
|
+ count: 0, // 用于判断表格是否刚渲染
|
|
|
+ isCheckBoxSort: false, // 用于判断是否是由自定义数据列引发的排序
|
|
|
+ // 以下是之前放于vuex中用于记录状态
|
|
|
+ preCheckedList: [], // 前一次的checkbox
|
|
|
+ // 排序的状态
|
|
|
+ sort: {
|
|
|
+ prop: "",
|
|
|
+ order: "",
|
|
|
+ label: "",
|
|
|
+ },
|
|
|
+ // 筛选的状态
|
|
|
+ checkBoxFilteredMap: {},
|
|
|
+ // input 所有的筛选
|
|
|
+ inputFilteredMap: {},
|
|
|
+ // columns label及prop对应的键值对
|
|
|
+ columnsLabelMap: {}
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ // 监听defaultColumn，若这个发生变化，代表传入的默认column变化，即数据表格发生了切换
|
|
|
+ defaultColumn() {
|
|
|
+ this.initColumns();
|
|
|
+ },
|
|
|
+ checkedList() {
|
|
|
+ // if(this.checkedList.length>0){
|
|
|
+ // this.$emit("selectedColumn",this.checkedList);
|
|
|
+ // }
|
|
|
+ // 处理当点击checkbox显示的是排序列时，恢复排序列的显示
|
|
|
+ let showLabelArray = this.checkboxShowLabel();
|
|
|
+ console.log("showLabelArray", showLabelArray);
|
|
|
+ // if (value.length !== 0) {
|
|
|
+ // value.map((item) => {
|
|
|
+ // this.handleStatusRevert(item);
|
|
|
+ // });
|
|
|
+ this.columns.map((column, index) => {
|
|
|
+ this.handleStatusRevert(column, index, showLabelArray);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.normalizeColumnsLabelMap();
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ if (!this.options.columnsTreeSelect) {
|
|
|
+ this.checkedList = this.$props.defaultColumn;
|
|
|
+ this.checkBoxOptions = this.$props.totalColumn;
|
|
|
+ } else {
|
|
|
+ this.checkedList = this.$refs.tree
|
|
|
+ .getCheckedNodes()
|
|
|
+ .map((item) => item.label);
|
|
|
+ }
|
|
|
+ // 挂载时将defaultSort属性传给vuex
|
|
|
+ this.handleDefaultSort();
|
|
|
+ },
|
|
|
+ // 动态切换表头的时候闪烁是因为表头重新计算高度导致的,以下方法解决此bug
|
|
|
+ beforeUpdate() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ //在数据加载完，重新渲染表格
|
|
|
+ this.$refs["operateTable"].doLayout();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //全选字段
|
|
|
+ handleCheckAllChange(val){
|
|
|
+ this.checkedList = val ? this.checkBoxOptions : [];
|
|
|
+ this.isIndeterminate = false;
|
|
|
+ },
|
|
|
+ //反选
|
|
|
+ handleCheckedCitiesChange(value){
|
|
|
+ let checkedCount = value.length;
|
|
|
+ this.checkAll = checkedCount === this.checkBoxOptions.length;
|
|
|
+ this.isIndeterminate = checkedCount > 0 && checkedCount < this.checkBoxOptions.length;
|
|
|
+ },
|
|
|
+ //初始化字段
|
|
|
+ initColumns(flag){
|
|
|
+ if(flag){
|
|
|
+ this.checkedList = this.$props.defaultSelectedColumn;
|
|
|
+ }else{
|
|
|
+ this.checkedList = this.$props.defaultColumn;
|
|
|
+ }
|
|
|
+ this.checkBoxOptions = this.$props.totalColumn;
|
|
|
+ },
|
|
|
+ // 处理判断checkbox 点击时，显示的是哪个字段名
|
|
|
+ checkboxShowLabel() {
|
|
|
+ // 判断显示的字段是哪个字段,如果是树形，可能有多个，故更改为数组接收
|
|
|
+ let value = [];
|
|
|
+ console.log("this.checkedList", this.checkedList);
|
|
|
+ if (this.count === 0) {
|
|
|
+ this.saveCheckedList(this.checkedList);
|
|
|
+ // this.$componentsStore.commit("table/saveCheckedList", this.checkedList);
|
|
|
+ this.count++;
|
|
|
+ } else {
|
|
|
+ if (this.checkedList.length > this.preCheckedList.length) {
|
|
|
+ for (let index = 0; index < this.checkedList.length; index++) {
|
|
|
+ if (!this.preCheckedList.includes(this.checkedList[index])) {
|
|
|
+ value.push(this.checkedList[index]);
|
|
|
+ }
|
|
|
+ // if (this.checkedList[index] !== this.preCheckedList[index]) {
|
|
|
+ // value = this.checkedList[index];
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.saveCheckedList(this.checkedList);
|
|
|
+ // this.$componentsStore.commit("table/saveCheckedList", this.checkedList);
|
|
|
+ }
|
|
|
+ return value;
|
|
|
+ },
|
|
|
+ // 处理sort\filterd由隐藏变为显示状态的恢复
|
|
|
+ handleStatusRevert(column, index, showLabelArray) {
|
|
|
+ let compareLabel = column.label;
|
|
|
+ if (showLabelArray.includes(compareLabel)) {
|
|
|
+ // 如果是有checkbox 筛选的字段，恢复筛选
|
|
|
+ let filteredValue =
|
|
|
+ this.checkBoxFilteredMap[this.columnsLabelMap[compareLabel]];
|
|
|
+ // 如果是有input 筛选的字段，恢复筛选
|
|
|
+ let filteredInputValue =
|
|
|
+ this.inputFilteredMap[this.columnsLabelMap[compareLabel]];
|
|
|
+ this.columns[index].filteredValue = filteredValue;
|
|
|
+ this.columns[index].defaultValue = filteredInputValue;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.operateTable.store.states.columns.map((column) => {
|
|
|
+ if (column.filteredValue && column.filteredValue.length) {
|
|
|
+ this.$refs.operateTable.store.commit("filterChange", {
|
|
|
+ column,
|
|
|
+ values: column.filteredValue,
|
|
|
+ silent: true,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.columns[index].filteredValue = [];
|
|
|
+ this.columns[index].defaultValue = "";
|
|
|
+ }
|
|
|
+ // 如果是有排序的字段，恢复排序
|
|
|
+ if (showLabelArray.includes(this.sort.label)) {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ //在数据加载完，重新渲染表格
|
|
|
+ this.isCheckBoxSort = true;
|
|
|
+ this.$refs.operateTable.sort(this.sort.prop, this.sort.order);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ /**
|
|
|
+ // 如果是有checkbox 筛选的字段，恢复筛选
|
|
|
+ let filteredValue = this.checkBoxFilteredMap[this.columnsLabelMap[value]];
|
|
|
+ // 如果是有input 筛选的字段，恢复筛选
|
|
|
+ let filteredInputValue = this.inputFilteredMap[
|
|
|
+ this.columnsLabelMap[value]
|
|
|
+ ];
|
|
|
+ for (let i = 0; i < this.columns.length; i++) {
|
|
|
+ if (this.columns[i].label === value) {
|
|
|
+ this.columns[i].filteredValue = filteredValue;
|
|
|
+ this.columns[i].defaultValue = filteredInputValue;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.operateTable.store.states.columns.map((column) => {
|
|
|
+ if (column.filteredValue && column.filteredValue.length) {
|
|
|
+ console.log("!11");
|
|
|
+ this.$refs.operateTable.store.commit("filterChange", {
|
|
|
+ column,
|
|
|
+ values: column.filteredValue,
|
|
|
+ silent: true,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.columns[i].filteredValue = [];
|
|
|
+ this.columns[i].defaultValue = "";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // for (let i = 0; i < this.columns.length; i++) {
|
|
|
+ // if (this.columns[i].label === value) {
|
|
|
+ // this.columns[i].defaultValue = filteredInputValue;
|
|
|
+ // } else {
|
|
|
+ // this.columns[i].defaultValue = "";
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // 如果是有排序的字段，恢复排序
|
|
|
+ if (value === this.sort.label) {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ //在数据加载完，重新渲染表格
|
|
|
+ this.isCheckBoxSort = true;
|
|
|
+ this.$refs.operateTable.sort(this.sort.prop, this.sort.order);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ */
|
|
|
+ },
|
|
|
+ // 处理生成columns 的label prop键值对
|
|
|
+ normalizeColumnsLabelMap() {
|
|
|
+ this.columns.map((column) => {
|
|
|
+ this.columnsLabelMap[column.label] = column.prop;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ filterInputMethod(column, inputFilteredMap) {
|
|
|
+ console.log("column, inputFilteredMap", column, inputFilteredMap);
|
|
|
+ this.inputFilteredMap = inputFilteredMap;
|
|
|
+ this.$emit("filterInputMethod", column, inputFilteredMap);
|
|
|
+ },
|
|
|
+ resetChangeMethod(tableColumn, columnProp) {
|
|
|
+ this.$emit("resetChangeMethod", tableColumn, this.inputFilteredMap);
|
|
|
+ },
|
|
|
+ cellMouseEnter(row, column, cell, event) {
|
|
|
+ this.$emit("cell-mouse-enter", row, column, cell, event);
|
|
|
+ },
|
|
|
+ cellMouseLeave(row, column, cell, event) {
|
|
|
+ this.$emit("cell-mouse-leave", row, column, cell, event);
|
|
|
+ },
|
|
|
+ cellClick(row, column, cell, event) {
|
|
|
+ this.$emit("cell-click", row, column, cell, event);
|
|
|
+ },
|
|
|
+ cellDblclick(row, column, cell, event) {
|
|
|
+ this.$emit("cell-dblclick", row, column, cell, event);
|
|
|
+ },
|
|
|
+ rowClick(row, column, event) {
|
|
|
+ this.$emit("row-click", row, column, event);
|
|
|
+ },
|
|
|
+ rowContextmenu(row, column, event) {
|
|
|
+ this.$emit("row-contextmenu", row, column, event);
|
|
|
+ },
|
|
|
+ rowDblclick(row, column, event) {
|
|
|
+ this.$emit("row-dblclick", row, column, event);
|
|
|
+ },
|
|
|
+ headerClick(column, event) {
|
|
|
+ this.$emit("header-click", column, event);
|
|
|
+ },
|
|
|
+ headerContextmenu(column, event) {
|
|
|
+ this.$emit("header-contextmenu", column, event);
|
|
|
+ },
|
|
|
+ sortChange(sortObj) {
|
|
|
+ this.changeSort(sortObj);
|
|
|
+ // this.$componentsStore.commit("table/changeSort", sortObj);
|
|
|
+ if (!this.isCheckBoxSort) {
|
|
|
+ this.$emit("sort-change", sortObj);
|
|
|
+ }
|
|
|
+ // 还原isCheckBoxSort
|
|
|
+ this.isCheckBoxSort = false;
|
|
|
+ },
|
|
|
+ handleDefaultSort() {
|
|
|
+ if (this.options.defaultSort !== undefined) {
|
|
|
+ let column = { label: "" };
|
|
|
+ // for (let index = 0; index < this.columns.length; index++) {
|
|
|
+ // if (this.columns[index].prop === this.options.defaultSort.prop) {
|
|
|
+ // column.label = this.columns[index].label;
|
|
|
+ // break;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ column.label = this.columnsLabelMap[this.options.defaultSort.prop];
|
|
|
+ this.changeSort({
|
|
|
+ ...this.options.defaultSort,
|
|
|
+ column,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 点击操作的下拉项目后触发事件
|
|
|
+ handleCommand(command) {
|
|
|
+ if (command.method) {
|
|
|
+ command.method(command.index, command.row, command.label);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 点击dropDown传参方法
|
|
|
+ composeValue(item, row, index) {
|
|
|
+ return {
|
|
|
+ label: item.label,
|
|
|
+ row: row,
|
|
|
+ index: index,
|
|
|
+ method: item.method,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ select(selection, row) {
|
|
|
+ this.$emit("select", selection, row);
|
|
|
+ },
|
|
|
+ selectAll(selection) {
|
|
|
+ this.$emit("select-all", selection);
|
|
|
+ },
|
|
|
+ checkboxSelected(selection) {
|
|
|
+ this.$emit("selection-change", selection);
|
|
|
+ },
|
|
|
+ selectable(row, index) {
|
|
|
+ let data = true;
|
|
|
+ this.$emit("selectable", row, index, (val) => {
|
|
|
+ data = val;
|
|
|
+ });
|
|
|
+ return data;
|
|
|
+ },
|
|
|
+ getRowKeys(row) {
|
|
|
+ let data;
|
|
|
+ for (let index = 0; index < this.dataSource.length; index++) {
|
|
|
+ if (row === this.dataSource[index]) {
|
|
|
+ data = index;
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // this.dataSource.map((item, index) => {
|
|
|
+ // if (row === item) {
|
|
|
+ // data = index;
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ this.$emit("row-key", row, (val) => {
|
|
|
+ data = val;
|
|
|
+ });
|
|
|
+ return data;
|
|
|
+ },
|
|
|
+ load(tree, treeNode, resolve) {
|
|
|
+ this.$emit("load", tree, treeNode, resolve);
|
|
|
+ },
|
|
|
+ // 记录表格总的筛选状态,用于列显示隐藏时保存checkbox状态
|
|
|
+ filterChange(filters) {
|
|
|
+ let currKey = Object.keys(filters)[0];
|
|
|
+ if (filters[currKey].length === 0) {
|
|
|
+ delete this.checkBoxFilteredMap[currKey];
|
|
|
+ } else {
|
|
|
+ this.checkBoxFilteredMap[currKey] = filters[currKey];
|
|
|
+ }
|
|
|
+ this.$emit("filter-change", filters);
|
|
|
+ },
|
|
|
+ checkChange(nodeObj, checkObj) {
|
|
|
+ this.checkedList = checkObj.checkedNodes.map((item) => {
|
|
|
+ return item.label;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 之前写在vuex里的方法
|
|
|
+ changeSort(sort) {
|
|
|
+ this.sort.prop = sort.prop;
|
|
|
+ this.sort.order = sort.order;
|
|
|
+ this.sort.label = sort.column.label;
|
|
|
+ },
|
|
|
+ saveCheckedList(preCheckedList) {
|
|
|
+ this.preCheckedList = preCheckedList;
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+ .operateTable{
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .operateTable .column-dropdown{
|
|
|
+ position: absolute;
|
|
|
+ right: 0px;
|
|
|
+ top: -42px;
|
|
|
+ z-index: 99;
|
|
|
+ }
|
|
|
+ .caoz_ft_warp{
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .caoz_ft_warp .el-input.is-active .el-input__inner, .caoz_ft_warp .el-input__inner:focus{
|
|
|
+ border-color: #9A4B9B;
|
|
|
+ outline: 0;
|
|
|
+ }
|
|
|
+ .el-checkbox__input.is-checked .el-checkbox__inner,.el-checkbox__input.is-indeterminate .el-checkbox__inner {
|
|
|
+ background-color: #9a4b9b;
|
|
|
+ border-color: #9a4b9b;
|
|
|
+ }
|
|
|
+ .el-checkbox__inner:hover {
|
|
|
+ border-color: #9A4B9B;
|
|
|
+ }
|
|
|
+ .el-checkbox__input.is-focus .el-checkbox__inner{
|
|
|
+ border-color: #9A4B9B;
|
|
|
+ }
|
|
|
+ .el-checkbox__input.is-checked+.el-checkbox__label {
|
|
|
+ color: #9A4B9B;
|
|
|
+ }
|
|
|
+ .checkboxScorll .el-checkbox__input.is-checked + .el-checkbox__label {
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+ .column-dropdown .el-button{margin-right: 0 !important;min-width:0;}
|
|
|
+ .column-dropdown .el-button:focus, .el-button:hover{
|
|
|
+ color: #9A4B9B;
|
|
|
+ border-color: #e1c9e1;
|
|
|
+ background-color: #f5edf5;
|
|
|
+ }
|
|
|
+ .checkboxScorll {
|
|
|
+ max-height: 300px;
|
|
|
+ overflow-y: auto;
|
|
|
+ }
|
|
|
+ .checkboxScorll .checkbox {
|
|
|
+ display: block;
|
|
|
+ margin-top: 10px;
|
|
|
+ padding-left: 20px;
|
|
|
+ }
|
|
|
+</style>
|
Glying