dx-element-ui/packages/list/src/tables.vue

<template>
  <el-table
    :data="emTableList.tableData"
    :key="emTableList.tableName"
    v-loading="emTableList.loading"
    :lazy="
      emTableList.options.hasOwnProperty('lazy')
        ? emTableList.options.lazy
        : true
    "
    :load="loadChildren"
    :tree-props="emTableList.treeProps"
    :stripe="emTableList.stripe === false ? false : true"
    style="width: 100%"
    :row-key="emTableList.rowKey"
    :default-sort="{prop: 'totalQty', order: 'descending'}"
    ref="multipleTable"
    @sort-change="sortReloadData"
    @selection-change="handleSelectionChange"
    :cell-style="emTableList.bodyCellStyle"
    :header-cell-style="emTableList.headerCellStyle"
    :row-class-name="tableRowClassName"
    :border="emTableList.border === false ? false : true"
    @filter-change="filterColHandler"
  >
      <el-table-column v-if="emTableList.isMultiple" type="selection" :fixed="true" align="center"></el-table-column>
      <el-table-column
        v-for="(item, index) in emTableList.showColumns"
        v-if="isShow(item) && item.stype !== 'checkbox'"
        :key="index"
        :header-align="item.headerAlign ? sub.headerAlign : 'center'"
        :prop="item.field"
        :width="item.width ? item.width : 'auto'"
        :align="item.align ? item.align : 'center'"
        :sort-orders="['descending','ascending',null]"
        :sortable="item.sort ? item.sort : false"
        :fixed="item.fixed ? item.fixed : false"
        :show-overflow-tooltip="item.tooltip === false ? false : true"
        :filters="tcpFilters(item)"
        :column-key="item.field ? item.field : ''"
        :filter-multiple="item.filterMultiple ? item.filterMultiple : false"
        :formatter="item.formatter ? formatter : formatterDef"
        :class-name="item.className"
      >
        <!--list属性-->
        <template v-if="item.stype == 'list'">
          <el-table-column
            v-for="(sub, subIndex) in item.sub"
            :key="subIndex"
            :header-align="sub.headerAlign ? sub.headerAlign : 'center'"
            :prop="sub.field"
            :label="sub.name"
            :width="sub.width ? sub.width : ''"
            :align="sub.align ? sub.align : 'center'"
            :sortable="sub.sort ? sub.sort : false"
            :fixed="sub.fixed ? sub.fixed : false"
            :show-overflow-tooltip="sub.tooltip === false ? false : true"
            :formatter="sub.formatter ? formatter : formatterDef"
            :filters="item.filters"
            :column-key="item.field"
            :filter-multiple="item.filterMultiple ? item.filterMultiple : false"
          >
            <template slot-scope="scope" >
              <!--mapping属性-->
              <span v-if="sub.stype == 'mapping'">{{
              mapping(scope.row, sub)
              }}</span>
            <span v-else-if="sub.stype === 'custom'">
              <component :is="sub.cellComp" :item="sub" :rowData="scope.row" @eventBus="cellCompEvent(scope.row,sub)"/>
            </span>
              <span v-else>{{ scope.row[sub.field] |nullMap }}</span>
            </template>


        </el-table-column>
        </template>
        <template slot="header">
          <ul class="table-expand-list" v-if="item.expand">
            <li
              v-for="(expandItem, expandIndex) of scope.row[item.expand.list]"
              :key="expandIndex"
            >
              <div class="name" :style="item.expand.nameStyle">
                {{ expandItem[item.expand.key] }}:
              </div>
              <div class="value" :style="item.expand.valueStyle">
                {{ expandParseValue(expandItem, item.expand) }}
              </div>
            </li>
          </ul>
          <el-tooltip
            v-if="item.hasOwnProperty('note') && item.note"
            class="item"
            effect="dark"
            :content="item.note"
            placement="top"
          >
            <span class="icon-name icon-info"
              ><i class="el-icon-info"></i
            ></span>
          </el-tooltip>
          <el-button
            v-if="item.hasOwnProperty('explain') && item.explain"
            icon="el-icon-info"
            style="padding: 0; margin-right: 4px"
            circle
            @click="emTableList.tableBtnEvent(item, { type: item.explain })"
          ></el-button>
          <span class="icon-name icon-info-name">{{ item.name }}</span>
        </template>
        <template slot-scope="scope" >
          <!--按钮-->
            <template v-if="item.stype === 'opt'">
                <el-button
                v-for="(opt, optIndex) in tableButtonList(item, scope)"
                :key="optIndex"
                :type="opt.bType ? opt.bType : 'text'"
                :style="opt.style ? opt.style : ''"
                :icon="opt.icon ? opt.icon : ''"
                :size="opt.size ? opt.size : 'small'"
                :plain="opt.shape === 'plain' ? true : false"
                :round="opt.shape === 'round' ? true : false"
                :circle="opt.shape === 'circle' ? true : false"
                :disabled="opt.hasOwnProperty('disabled') ? opt.disabled : false"
                @click="optCellData(scope.row, opt)"
                v-shortcutKeys="{key:opt.type ==='detail'?'d':''}"
                >
                {{ opt.name }}
                </el-button>
            </template>
            <!-- <span v-else-if="item.stype === 'slot'">
              <slot :name="item.slot" :item="item" :rowData="scope.row"/>
            </span> -->
            <span v-else-if="item.stype === 'custom'">
              <component :is="item.cellComp" :item="item" :rowData="scope.row" @eventBus="cellCompEvent(scope.row,item,$event)"/>
            </span>
            <span v-else-if="item.stype === 'select'">
              <el-select
              v-model="scope.row[item.field]"
              >
            <el-option v-for="(o,i) in emTableList.select_list[item[item.stype].obj]" :key="i" :label="o.label" :value="o.value">
            {{ o.label }}</el-option>
            </el-select>
            </span>
            <!--tag标签-->
            <span v-else-if="item.stype === 'tag'">
                <el-popover
                v-if="item.tooltip === false"
                placement="top"
                style="max-width: 500px"
                trigger="hover"
                >
                <template v-for="(tag, index) in item.tags">
                <el-tag
                    :key="index"
                    v-if="scope.row[item.field] == tag.value"
                    :type="tag.type"
                    :effect="tag.effect"
                    disable-transitions
                    :closable="
                    item.hasOwnProperty('closable')
                        ? item.closable
                        : item.action && item.action.url
                        ? true
                        : false
                    "
                    @close="handleTagListClose(item, scope.row, tag)"
                    >{{ tag.label }}</el-tag
                >
                </template>
                <!--触发tooltip信息-->
                <span slot="reference">
                  <template v-for="(tag, index) in item.tags">
                  <el-tag
                    :key="index"
                    v-if="scope.row[item.field] == tag.value"
                    :type="tag.type"
                    :effect="tag.effect"
                    disable-transitions
                    >{{ tag.label }}</el-tag
                    >
                  </template>
                </span>
                </el-popover>
                <span v-else
                >

                <template v-for="(tag, index) in item.tags">
                <el-tag
                    :key="index"
                    v-if="scope.row[item.field] == tag.value"
                    :type="tag.type"
                    :effect="tag.effect"
                    disable-transitions
                    >{{ tag.label }}<br /></el-tag
                >
              </template>
              </span>
            </span>
            <!--tag标签list-->
            <span v-else-if="item.stype === 'list-tag'">
                <el-popover
                v-if="item.tooltip === false"
                placement="top"
                style="max-width: 500px"
                trigger="hover"
                >
                <span
                    v-if="
                    scope.row[item.field] &&
                    typeof scope.row[item.field] === 'string'
                    "
                >
                    <el-tag
                    style="margin: 1px"
                    v-for="(tag, index) in scope.row[item.field].split(',')"
                    :key="index"
                    disable-transitions
                    :closable="
                        item.hasOwnProperty('closable')
                        ? item.closable
                        : item.action && item.action.url
                        ? true
                        : false
                    "
                    @close="handleTagListClose(item, scope.row, tag)"
                    >{{ tag }}</el-tag
                    >
                </span>
                <span v-else
                    ><el-tag
                    style="margin: 1px"
                    v-for="(tag, index) in scope.row[item.field]"
                    :key="index"
                    disable-transitions
                    :closable="
                        item.hasOwnProperty('closable')
                        ? item.closable
                        : item.action && item.action.url
                        ? true
                        : false
                    "
                    @close="handleTagListClose(item, scope.row, tag)"
                    >{{
                        item.action && item.action.name
                        ? tag[item.action.name]
                        : tag
                    }}</el-tag
                    ></span
                >
                <!--触发tooltip信息-->
                <span
                    slot="reference"
                    v-if="
                    scope.row[item.field] &&
                    typeof scope.row[item.field] === 'string'
                    "
                >
                    <el-tag
                    style="margin: 1px"
                    v-for="(tag, index) in scope.row[item.field].split(',')"
                    :key="index"
                    disable-transitions
                    >{{ tag }}</el-tag
                    >
                </span>
                <span slot="reference" v-else
                    ><el-tag
                    style="margin: 1px"
                    v-for="(tag, index) in scope.row[item.field]"
                    :key="index"
                    disable-transitions
                    >{{
                        item.action && item.action.name
                        ? tag[item.action.name]
                        : tag
                    }}</el-tag
                    ></span
                >
                </el-popover>
                <span v-else>
                <span
                    slot="reference"
                    v-if="
                    scope.row[item.field] &&
                    typeof scope.row[item.field] === 'string'
                    "
                >
                    <el-tag
                    style="margin: 1px"
                    v-for="(tag, index) in scope.row[item.field].split(',')"
                    :key="index"
                    disable-transitions
                    >{{ tag }}<br
                    /></el-tag>
                </span>
                <span slot="reference" v-else
                    ><el-tag
                    style="margin: 1px"
                    v-for="(tag, index) in scope.row[item.field]"
                    :key="index"
                    disable-transitions
                    >{{
                        item.action && item.action.name
                        ? tag[item.action.name]
                        : tag
                    }}<br /></el-tag
                ></span>
                </span>
            </span>
            <!--link属性-->
            <span v-else-if="item.stype === 'link'">
                <el-link
                type="primary"
                @click="tableContentCellData(scope.row, item)"
                :underline="false"
                >{{ scope.row[item.field] }}</el-link
                >
            </span>
            <!--link-value属性-->
            <span v-else-if="item.stype === 'link-value'">
                <el-link
                type="primary"
                @click="tableContentCellData(scope.row, item)"
                v-if="scope.row[item.field] == item.value"
                :underline="false"
                >{{ item.label }}</el-link
                >
                <span v-else>{{
                scope.row[item.field] ? scope.row[item.field] : "-"
                }}</span>
            </span>
            <!--link-status属性-->
            <span v-else-if="item.stype === 'link-status'">
              <template v-for="(objItem, objIndex) in item.obj">
                <span
                :key="objIndex"
                v-if="scope.row[item.field] == objItem.value"
                >
                <el-link
                    v-if="
                    Array.isArray(item.value) &&
                    item.value.includes(scope.row[item.field])
                    "
                    type="primary"
                    @click="tableContentCellData(scope.row, item)"
                    :underline="false"
                    >{{ objItem.label ? objItem.label : "-" }}</el-link
                >
                <span v-else>{{ objItem.label ? objItem.label : "-" }}</span>
                </span>
              </template>
            </span>
            <!--switch属性-->
            <span v-else-if="item.stype == 'switch'">
                <el-switch
                v-model="scope.row[item.field]"
                :width="getPropValue(item, 'width')"
                :inactive-value="getPropValue(item, '00')"
                :inactive-text="getPropValue(item, '01')"
                :inactive-color="getPropValue(item, '02')"
                :active-value="getPropValue(item, '10')"
                :active-text="getPropValue(item, '11')"
                :active-color="getPropValue(item, '12')"
                :disabled="getPropValue(item, 'disabled', scope)"
                @change="switchChange(scope.row, item)"
                ></el-switch>
            </span>
            <!--image图片-->
            <span v-else-if="item.stype == 'image'">
                <span
                v-if="
                    Object.prototype.toString.call(scope.row[item.field]) ===
                    '[object Array]'
                "
                >
                <img
                    v-for="(it, itIndex) in scope.row[item.field]"
                    :key="itIndex"
                    :src="
                    tableImageURL(
                        item,
                        it[item.imageUrl] ? it[item.imageUrl] : it.url
                    )
                    "
                    :style="
                    item.tStyle ? item.tStyle : 'min-width: 50px; height: 20px;'
                    "
                />
                </span>
                <img
                v-else
                :src="tableImageURL(item, scope.row[item.field])"
                :style="
                    item.tStyle ? item.tStyle : 'min-width: 50px; height: 20px;'
                "
                />
            </span>
            <!--input属性-->
            <span v-else-if="item.stype == 'input'">
                <el-form
                v-if="columnShowStatus(item, scope)"
                class="table-input-form"
                :model="scope.row"
                size="small"
                >
                <div v-if="item.inputShow" class="input-label is-input">
                    <nt-input
                    :inputItem="item"
                    :rowData="scope.row"
                    :inputType="'table'"
                    :selectList="emTableList.select_list"
                    :axios="emTableList.axios"
                    :queryURL="emTableList.queryURL"
                    :responseSuccess="emTableList.responseSuccess"
                    :publicParams="emTableList._publicParams"
                    @onInputBlur="() => onInputBlur(scope.row, item)"
                    ></nt-input>
                </div>
                <div v-else>
                    <div v-if="scope.row.isInput" class="input-label is-input">
                    <nt-input
                        :inputItem="item"
                        :rowData="scope.row"
                        :inputType="'table'"
                        :selectList="emTableList.select_list"
                        :axios="emTableList.axios"
                        :queryURL="emTableList.queryURL"
                        :responseSuccess="emTableList.responseSuccess"
                        :publicParams="emTableList._publicParams"
                    ></nt-input>
                    <i
                        class="el-icon-circle-check"
                        @click.stop="submitInputEvent(scope.row, item)"
                    ></i>
                    </div>
                    <div
                    v-else
                    class="input-label"
                    @click="cellInputEvent(scope.row)"
                    >
                    {{ scope.row[item.field] }} <i class="el-icon-edit"></i>
                    </div>
                </div>
                </el-form>
                <span v-else>{{ scope.row[item.field] }}</span>
            </span>
            <!--fields属性-->
            <span v-else-if="item.stype == 'fields'">
                <span
                v-for="(currField, currIndex) in item.fieldList"
                :key="currIndex"
                ><span v-if="currIndex > 0">{{
                    item.sign ? item.sign : " / "
                }}</span
                >{{ scope.row[currField] }}</span
                >
            </span>
            <!--mapping属性-->
            <span v-else-if="item.stype == 'mapping'">{{
                mapping(scope.row, item)
            }}</span>
            <!--rate属性-->
            <span v-else-if="item.stype == 'rate'">
                <el-rate
                v-model="scope.row[item.field]"
                :max="item.max ? item.max : 5"
                :disabled="item.isDisabled ? item.isDisabled : false"
                :allow-half="item.half ? item.half : false"
                :show-score="item.score ? item.score : false"
                :text-color="item.color ? item.color : '#1F2D3D'"
                score-template="{value}"
                ></el-rate>
            </span>
            <!--value属性-->
            <span v-else-if="item.stype == 'value'">{{ item.value }}</span>
            <!--format属性-->
            <span v-else-if="item.stype == 'format'">{{
                scope.row[item.field] | vueFiltersInit(item, scope)
            }}</span>
            <!--v-html属性-->
            <span
                v-else-if="item.stype == 'v-html'"
                v-html="scope.row[item.field]"
            ></span>
            <!--text-style属性-->
            <span v-else-if="item.stype == 'text-style'">
                <span
                :style="
                    Object.prototype.toString.call(item.classValueName) ===
                    '[object Function]'
                    ? item.classValueName(scope.row, item.field)
                    : item.classValueName
                "
                >{{ scope.row[item.field] }}</span
                >
            </span>
            <!--formatter-style属性-->
            <span
                v-else-if="item.stype == 'formatter-style'"
                v-html="formatterStyle(scope.row, item)"
            ></span>
            <span v-else>{{ scope.row[item.field] | nullMap}}</span>
        </template>

      </el-table-column>
  </el-table>
</template><script>
// import {vueFiltersInit} from '@/utils/filters'
import {
  formatterSelf,
  formatterDefault,
  tableListUpdateRowEvent,
  unitTreeChildList,
  selectListToValue,
  unitTableFiltersNode,
} from "./tool-table";
import {
  isTypeof,
  checkAuthButtonList,
  isHttpHeaderURL,
  nullView
} from "@/components/thrid/em-element-ui/src/tools/utils";
import NtInput from "../../input";
import bus from "@/components/thrid/em-element-ui/src/tools/eventBus";

export default {
  name: "EmTables",
  components: { NtInput },
  props: {
    emTableList: {
      type: Object,
      default: () => {},
    },
    listType: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      filtersList: {},
      isMultipleTables: this.listType.length > 1,
    };
  },
  watch: {},
  created: function () {
    // unitTableFiltersNode(this);
  },
  filters: {
    nullMap:nullView
  },
  computed: {
    defaultSort(){
      const defsort = this.showColumns.find(f=>typeof(f.sort) === 'string')
      return defsort && {prop: defsort.field, order: defsort.sort}
    },
    // 第一个 显示的 && 复选框列
    checkboxItem() {
        return this.emTableList.showColumns.find(f=> {
            return this.isShow(f) && f.stype === 'checkbox' 
        })
    },
    // 所有显示的&& 非复选框列
    showColumns() {
        return this.emTableList.showColumns.filter(f=> {
            return this.isShow(f) && f.stype !== 'checkbox'
        })
    }
  },
  mounted() {
    if (this.isMultipleTables) {
      // 监听兄弟组件选中值变化
      bus.$on("checkedEventCardToTable", (data) => {
        data.forEach((item) => {
          if (item.hasOwnProperty("cardChecked") && item.cardChecked) {
            this.$refs.multipleTable.toggleRowSelection(item, true);
          } else {
            this.$refs.multipleTable.toggleRowSelection(item, false);
          }
        });
      });
    }
  },
  // filters:{
  //   vueFiltersInit
  // },
  methods: {
    /** 自定义组件事件总线
     * 将传入的参数赋值给item.ext
     */
    cellCompEvent(row, item,ext) {
      item.ext = ext
      this.emTableList.tableBtnEvent(row, item);
    },
    // 获取表格列-filters属性
    tcpFilters(item) {
      let rv = undefined
      if(item.filters) {
        if (item.filters.push) {
          rv = item.filters
        }
        if (item.filters.obj) {
          const sl = this.emTableList.select_list[item.filters.obj]
          if (sl) {
            rv = sl.map(m=>{
              return {
                text:m.label,
                value:m.value
              }
            })
          }
        }
      }
      return rv
    },
    // 数据字段映射
    mapping(row, item) {
      let rv = ''
      if (typeof item.mapping === 'string') {
        rv = row[item.mapping]
      }
      if (typeof item.mapping === 'function') {
        rv = item.mapping(row)
      }
      if (typeof item.mapping === 'object') {
        // 存在select_list名称，从select_list 映射
        if (item.mapping.obj) {
          // 当前下拉数组
          const curs = this.emTableList.select_list[item.mapping.obj]
          // 存在select集合
          if (curs) {
            // 通过字段值获取 对应label
            const cursi = curs.find(f=>f.value == row[item.field])
            if(cursi) {
              rv = cursi.label
            }
          }
        }
      }
      return nullView(rv)
    },
    // 获取组件属性值
    getPropValue(item, type, scope) {
      let rv = null
      // switch 子属性的映射信息
      const maps = {
        switch : {
          // 关闭值
          '00': {
            pk:'inValue',
            def:0
          },
          // 关闭文案
          '01': {
            pk:'inText',
            def:'关闭'
          },
          // 关闭颜色
          '02': {
            pk:'inColor',
            def:'#aaaaaa'
          },
          // 打开值
          '10': {
            pk:'aValue',
            def:1
          },
          // 打开文案
          '11': {
            pk:'aText',
            def:'打开'
          },
          // 打开颜色
          '12': {
            pk:'aColor',
            def:'#13ce66'
          },
          // 宽度
          'width': {
            pk:'width',
            def:50
          },
          // 禁用
          'disabled': {
            pk:'disabled',
            def: false
          }
        }
      }
      // 获取stype类型对应的映射信息
      const curTypeMap = maps[item.stype]
      if(!curTypeMap) {
        return rv
      }
      // 获取具体的属性映射信息
      const curAttrMap = curTypeMap[type]
      if(curAttrMap) {
        // stype对应的类型的属性配置信息组
        const curTypeConfig = item[item.stype]
        // 存在具体属性配置
        if(curTypeConfig && curTypeConfig.hasOwnProperty(curAttrMap.pk)) {
          const cv = curTypeConfig[curAttrMap.pk]
          if(typeof cv === 'function' && scope) {
            rv = cv(scope)
          } else {
            rv = cv
          }
        // 不存在
        } else {
          rv = curAttrMap.def
          // // 取item中的属性信息
          // if(item.hasOwnProperty(curAttrMap.pk)) {
          //   rv = item[curAttrMap.pk]
          // }else {// 都取不到取默认值
          //   rv = curAttrMap.def
          // }
        }
      }
      return rv
    },
    // 改变行的颜色
    tableRowClassName({ row, rowIndex }) {
      if (isTypeof(this.emTableList.rowClassName) === "function") {
        return this.emTableList.rowClassName(row, rowIndex);
      } else {
        return this.emTableList.rowClassName;
      }
    },
    expandParseValue(row, item) {
      const value = item.hasOwnProperty("value")
        ? row.hasOwnProperty(item.value)
          ? row[item.value] === "null" || row[item.value] === null
            ? "-"
            : row[item.value]
          : "-"
        : "-";

      let resultValue = value;
      if (item.hasOwnProperty("obj")) {
        if (Array.isArray(this.emTableList.select_list[item.obj])) {
          this.emTableList.select_list[item.obj].forEach((node) => {
            if (node.value == value) {
              resultValue = node.label;
            }
          });
        }
      }

      return resultValue;
    },
    isShow(item) {
      if (item.hasOwnProperty("hide")) {
        if (isTypeof(item.hide) === "function") {
          const hideStatus = item.hide();
          return !hideStatus;
        } else {
          return !item.hide;
        }
      } else {
        return true;
      }
    },
    // 是否显示stype的组件，false显示文本
    columnShowStatus(item, scope) {
      let status = item.hasOwnProperty("iShowStatus")
        ? isTypeof(item.iShowStatus) === "function"
          ? item.iShowStatus(scope.row)
          : item.iShowStatus
        : true;

      return status;
    },
    // 返回有权限的操作事件
    tableButtonList(item, scope) {
      let buttons =
        isTypeof(item.list) === "array"
          ? item.list
          : isTypeof(item.list) === "function"
          ? item.list(scope)
          : [];

      if (buttons && buttons.length > 0) {
        return checkAuthButtonList(buttons, this.emTableList.authButtonList);
      } else {
        return [];
      }
    },
    optCellData(row, option) {
      // 操作后改变该行的背景颜色
      if (option.bgcolor) {
        if (row.hasOwnProperty("optCellSelfBgcolor")) {
          row.optCellSelfBgcolor = option.bgcolor;
        } else {
          this.$set(row, "optCellSelfBgcolor", option.bgcolor);
        }
      }
      this.emTableList.tableBtnEvent(row, option);
    },
    tableContentCellData(row, item) {
      let obj = Object.create(null);
      obj = Object.assign({}, item);
      obj.type = item.field;

      this.optCellData(row, obj);
    },
    formatterStyle(row, item) {
      if (item.formatter) {
        return selectListToValue(this, item.formatter, row[item.field], true);
      } else {
        return "";
      }
    },
    //格式化
    formatter(row, column, cellValue, index) {
      return formatterSelf(this, row, column, cellValue, index);
    },
    // table图片地址拼接
    tableImageURL(item, url) {
      if (isHttpHeaderURL(url)) {
        return url;
      } else {
        return item.fileHost + (item.path || "") + url;
      }
    },
    loadChildren(tree, treeNode, resolve) {
      if (
        !this.emTableList.options.hasOwnProperty("lazy") ||
        (this.emTableList.options.hasOwnProperty("lazy") &&
          this.emTableList.options.lazy)
      ) {
        // 记录点击懒加载树的记录 load
        const key = tree[this.emTableList.rowKey];

        this.emTableList.loadTableTreeNodeMap.set(key, {
          tree,
          treeNode,
          resolve,
        });

        unitTreeChildList(this, tree, treeNode, resolve);
      }
    },
    formatterDef(row, column, cellValue, index) {
      return formatterDefault(this, row, column, cellValue, index);
    },
    switchChange(row, item) {
        tableListUpdateRowEvent(this, row, item);
    },
    sortReloadData(obj) {
      this.emTableList.sortReloadData(obj);
    },
    handleSelectionChange(val) {
      this.emTableList.handleSelectionChange(val);
      if (this.isMultipleTables) {
        bus.$emit("checkedEventTableToCard", val);
      }
    },
    cellInputEvent(item) {
      if (item.hasOwnProperty("isInput")) {
        item.isInput = true;
      } else {
        this.$set(item, "isInput", true);
      }
    },
    onInputBlur(row, item) {
      tableListUpdateRowEvent(this, row, item);
    },
    submitInputEvent(row, item) {
      item.isInput = false;
      tableListUpdateRowEvent(this, row, item);
    },
    filterColHandler(filters) {
      const finds = {};

      for (let [k, v] of Object.entries(filters)) {
        finds[k] = isTypeof(v) === "array" ? v.join(",") : v;
      }
      this.emTableList.paginationTick = false;
      this.$nextTick(() => {
        this.emTableList.pages.pageNum = 1;
        this.emTableList.searchFormList(finds);
        this.emTableList.paginationTick = true;
      });

      return false;
    },
    handleDisable(row, index) {
      return this.emTableList.handleCheckboxDisable(row, index);
    },
    handleTagClose(item, row) {
      tableListUpdateRowEvent(this, row, item);
    },
    handleTagListClose(item, row, tag) {
      let rows = Object.assign({}, row);
      if (isTypeof(tag) === "object") {
        rows = Object.assign({}, row, tag);
      } else {
        rows["tagCustomId"] = tag;
      }

      if (item.action && item.action.url) {
        this.handleTagClose(item, rows);
      }
    },
  },
};
</script>
<style lang="scss">
.el-table .select-after-line {
  background-color: #f0f9eb;
  &.el-table__row--striped td {
    background-color: #f0f9eb !important;
  }
}
.el-table .cell {
  white-space: pre-line;
  //解决 动态隐藏列时 单元格内容显示不全问题
  &.el-tooltip {
    width:100% !important;
  }
  .icon-name {
    display: inline-block;
    i {
      font-size: 12px;
      padding-left: 0;
      padding-right: 5px;
    }
  }
  .input-label {
    display: flex;
    align-items: center;
    justify-content: space-between;

    /*&.is-input {
                input {
                    color: #409EFF;
                    font-size: 12px;
                    height: 23px;
                    line-height: 23px;
                    border-color: #f2f2f2;
                }
                i {
                    font-size: 15px;
                    padding-left: 10px;
                }
            }

            i {
                color: #409EFF;
            }*/
  }

  .table-input-form {
    .el-form-item__label {
      display: none;
    }
    .el-form-item {
      margin-bottom: 0;
    }
    .el-input__inner {
      padding: 2px 8px;
    }
    .input-label.is-input {
      height: 32px;
      i {
        padding-left: 0;
      }
      input {
        height: 28px;
        line-height: 28px;
      }
    }
  }
}
</style>