|
|
@@ -1,779 +0,0 @@
|
|
|
-<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