newtv-ui-3.0 0.0.1

package/packages/table/src/table.vue

@@ -0,0 +1,797 @@
+<template>
+  <div class="fg-table-body">
+    <el-table
+      ref="table"
+      :data="tableData"
+      :stripe="stripe"
+      :border="border"
+      :row-class-name="rowClassName"
+      :row-style="rowStyle"
+      :cell-class-name="cellClassName"
+      :cell-style="cellStyle"
+      :default-sort="defaultSort"
+      :show-header="showHeader"
+      @row-click="rowClick"
+      @row-dblclick="rowDblclick"
+      @select="select"
+      @select-all="selectAll"
+      @selection-change="selectionChange"
+      @filter-change="filterChange"
+      :span-method="spanMethod"
+      @sort-change="sortChange"
+      :row-key="rowKey"
+      :empty-text="empty"
+      :highlight-current-row="highlightCurrentRow"
+      @current-change="currentChange"
+      :height="height"
+      :key="tableRandom"
+    >
+      <template #empty>
+        <slot name="empty"></slot>
+      </template>
+      <template v-for="(col, index) in tableCols">
+        <el-table-column
+          v-if="col.type === 'slot' || col.type == 'expand'"
+          :key="`table_special${index}`"
+          :align="col.align || 'left'"
+          :header-align="col['header-align'] || 'left'"
+          :show-overflow-tooltip="col.showOverflowTooltip || showOverflowTooltip"
+          :label="col.label"
+          :width="col.width"
+          :min-width="col.minWidth"
+          :fixed="col.fixed"
+          :formatter="col.formatter"
+          :type="col.type == 'slot' ? '' : col.type"
+          :sortable="col.sortable || false"
+          :sort-method="col.sortMethod"
+          :sort-by="col.sortBy"
+          :sort-orders="col.sortOrders || ['ascending', 'descending', null]"
+          :reserve-selection="reserveSelection"
+          :class-name="col.className"
+        >
+          <template #default="scope">
+            <slot :name="col.prop" :row="scope.row" :$index="scope.$index"></slot>
+          </template>
+        </el-table-column>
+        <el-table-column
+          v-else-if="col.type === 'spbtn'"
+          :key="`table_spbtn${index}`"
+          :align="col.align || 'left'"
+          :header-align="col['header-align'] || 'left'"
+          :show-overflow-tooltip="col.showOverflowTooltip || showOverflowTooltip"
+          :label="col.label"
+          :width="col.width"
+          :min-width="col.minWidth"
+          :fixed="col.fixed"
+          :formatter="col.formatter"
+          class-name="table-right-btnGroup"
+        >
+          <template #default="scope">
+            <template
+              v-if="
+                col.groups.filter((group) =>
+                  typeof group.isShow === 'boolean' ? group.isShow : group.isShow(scope.row),
+                ).length > 4
+              "
+            >
+              <template
+                v-for="(item, index) in col.groups
+                  .filter((group) =>
+                    typeof group.isShow === 'boolean' ? group.isShow : group.isShow(scope.row),
+                  )
+                  .splice(0, 3)"
+              >
+                <el-tooltip
+                  v-if="!col.hideTitle && index < 4"
+                  :key="`btn${index}`"
+                  :disabled="!col.openTooltip"
+                  class="item"
+                  :effect="col.effect || 'dark'"
+                  :content="typeof item.title === 'function' ? item.title(scope.row) : item.title"
+                  placement="top"
+                >
+                  <el-button
+                    :type="item.type"
+                    :size="col.size || 'small'"
+                    :style="item.style"
+                    @click.stop="() => item.clickHandler && item.clickHandler(scope.row)"
+                    :circle="col.shape === 'circle'"
+                    :plain="col.shape === 'plain'"
+                    :round="col.shape === 'round'"
+                    :disabled="
+                      typeof item.disabled === 'function' ? item.disabled(scope.row) : item.disabled
+                    "
+                  >
+                    {{ typeof item.title === 'function' ? item.title(scope.row) : item.title }}
+                  </el-button>
+                </el-tooltip>
+                <el-tooltip
+                  v-if="col.hideTitle && index < 3"
+                  :key="`btn${index}`"
+                  :disabled="!col.openTooltip"
+                  class="item"
+                  :effect="col.effect || 'dark'"
+                  :content="typeof item.title === 'function' ? item.title(scope.row) : item.title"
+                  placement="top"
+                >
+                  <span v-if="item.isShowTitle" :style="item.style">
+                    {{
+                      typeof item.title === 'function' ? item.title(scope.row) : item.title
+                    }}</span
+                  >
+                  <el-button
+                    v-if="item.isHideIcon"
+                    :class="{ hideBtn: isHideBtn && scope.row.isHideBtn }"
+                    :type="item.type"
+                    :size="col.size || 'small'"
+                    :style="item.style"
+                    @click.stop="() => item.clickHandler && item.clickHandler(scope.row)"
+                    :circle="col.shape === 'circle'"
+                    :plain="col.shape === 'plain'"
+                    :round="col.shape === 'round'"
+                    :disabled="
+                      typeof item.disabled === 'function' ? item.disabled(scope.row) : item.disabled
+                    "
+                  >
+                  </el-button>
+                  <el-icon
+                    :size="20"
+                    :class="{ hideBtn: isHideBtn && scope.row.isHideBtn }"
+                    v-if="!item.isIconFont && !item.isHideIcon"
+                    @click.stop="() => item.clickHandler && item.clickHandler(scope.row)"
+                    :style="item.style"
+                  >
+                    <component :is="item.icon"></component>
+                  </el-icon>
+                  <i
+                    class="iconfont"
+                    :class="[{ hideBtn: isHideBtn && scope.row.isHideBtn }, item.icon]"
+                    v-if="item.isIconFont && !item.isHideIcon"
+                    :style="item.style"
+                    @click.stop="() => item.clickHandler && item.clickHandler(scope.row)"
+                  ></i>
+                </el-tooltip>
+              </template>
+              <el-dropdown
+                style="color: #3e89fa"
+                :class="{ hideBtn: isHideBtn && scope.row.isHideBtn }"
+              >
+                <i class="iconfont icon-tubiao-gengduo"></i>
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <el-dropdown-item
+                      v-for="(list, index) in col.groups
+                        .filter((group) =>
+                          typeof group.isShow === 'boolean'
+                            ? group.isShow
+                            : group.isShow(scope.row),
+                        )
+                        .slice(3)"
+                      :command="{ fn: list.clickHandler, row: scope.row }"
+                      :key="`btngroup${index}`"
+                      @mouseenter="mouseEnter(col, scope.row)"
+                      @mouseleave="mouseLeave(col, scope.row)"
+                    >
+                      <span
+                        :style="list.style"
+                        @click.stop="() => list.clickHandler && list.clickHandler(scope.row)"
+                        >{{ list.title }}</span
+                      >
+                    </el-dropdown-item>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
+            </template>
+
+            <template
+              v-else
+              v-for="(item, index) in col.groups.filter((group) =>
+                typeof group.isShow === 'boolean' ? group.isShow : group.isShow(scope.row),
+              )"
+            >
+              <el-tooltip
+                v-if="!col.hideTitle"
+                :key="`btn${index}`"
+                :disabled="!col.openTooltip"
+                class="item"
+                :effect="col.effect || 'dark'"
+                :content="typeof item.title === 'function' ? item.title(scope.row) : item.title"
+                placement="top"
+              >
+                <span v-if="item.isShowTitle" :style="item.style" @click.stop="() => item.clickHandler && item.clickHandler(scope.row)">
+                  {{ typeof item.title === 'function' ? item.title(scope.row) : item.title }}</span>
+                <el-button
+                  v-else
+                  :class="{ hideBtn: isHideBtn }"
+                  :type="item.type"
+                  :size="col.size || 'small'"
+                  :style="item.style"
+                  @click.stop="() => item.clickHandler && item.clickHandler(scope.row)"
+                  :circle="col.shape === 'circle'"
+                  :plain="col.shape === 'plain'"
+                  :round="col.shape === 'round'"
+                  :disabled="
+                    typeof item.disabled === 'function' ? item.disabled(scope.row) : item.disabled
+                  "
+                >
+                  {{ typeof item.title === 'function' ? item.title(scope.row) : item.title }}
+                </el-button>
+              </el-tooltip>
+              <el-tooltip
+                v-else
+                :key="`btn${index}`"
+                :disabled="!col.openTooltip"
+                class="item"
+                :effect="col.effect || 'dark'"
+                :content="typeof item.title === 'function' ? item.title(scope.row) : item.title"
+                placement="top"
+              >
+                <span v-if="item.isShowTitle" :style="item.style" @click.stop="() => item.clickHandler && item.clickHandler(scope.row)">
+                  {{ typeof item.title === 'function' ? item.title(scope.row) : item.title }}</span
+                >
+                <el-button
+                  v-if="item.isHideIcon"
+                  :class="{ hideBtn: isHideBtn }"
+                  :type="item.type"
+                  :size="col.size || 'small'"
+                  :style="item.style"
+                  @click.stop="() => item.clickHandler && item.clickHandler(scope.row)"
+                  :circle="col.shape === 'circle'"
+                  :plain="col.shape === 'plain'"
+                  :round="col.shape === 'round'"
+                  :disabled="
+                    typeof item.disabled === 'function' ? item.disabled(scope.row) : item.disabled
+                  "
+                >
+                </el-button>
+                <el-icon
+                  :size="20"
+                  :class="{ hideBtn: isHideBtn }"
+                  v-if="!item.isIconFont && !item.isHideIcon"
+                  @click.stop="() => item.clickHandler && item.clickHandler(scope.row)"
+                  :style="item.style"
+                >
+                  <component :is="item.icon"></component>
+                </el-icon>
+                <i
+                  class="iconfont"
+                  :class="[{ hideBtn: isHideBtn }, item.icon]"
+                  v-if="item.isIconFont && !item.isHideIcon"
+                  :style="item.style"
+                  @click.stop="() => item.clickHandler && item.clickHandler(scope.row)"
+                ></i>
+              </el-tooltip>
+            </template>
+          </template>
+        </el-table-column>
+        <el-table-column
+          v-else-if="col.type === 'selection'"
+          :key="`table_selection${index}`"
+          :prop="col.prop"
+          :label="col.label"
+          :width="col.width"
+          :min-width="col.minWidth"
+          :align="col.align || 'left'"
+          :header-align="col['header-align'] || 'left'"
+          :type="col.type || ''"
+          :show-overflow-tooltip="col.showOverflowTooltip || showOverflowTooltip"
+          :formatter="col.formatter"
+          :fixed="col.fixed"
+          :sortable="col.sortable || false"
+          :sort-method="col.sortMethod"
+          :sort-by="col.sortBy"
+          :sort-orders="col.sortOrders || ['ascending', 'descending', null]"
+          :reserve-selection="reserveSelection"
+          :selectable="col.selectable"
+        >
+        </el-table-column>
+        <el-table-column
+          v-else-if="col.type === 'multilevel' && col.children"
+          :key="`table_multilevel${index}`"
+          :prop="col.prop"
+          :label="col.label"
+          :width="col.width"
+          :min-width="col.minWidth"
+          :align="col.align || 'left'"
+          :header-align="col['header-align'] || 'left'"
+          :type="col.type || ''"
+          :show-overflow-tooltip="col.showOverflowTooltip || showOverflowTooltip"
+          :formatter="col.formatter"
+          :fixed="col.fixed"
+          :sortable="col.sortable || false"
+          :sort-method="col.sortMethod"
+          :sort-by="col.sortBy"
+          :sort-orders="col.sortOrders || ['ascending', 'descending', null]"
+        >
+          <el-table-column
+            v-for="(item, idx) of col.children"
+            :prop="item.prop"
+            :label="item.label"
+            :align="item.align || 'left'"
+            :width="item.width"
+            :key="`multilevel${idx}`"
+          >
+          </el-table-column>
+        </el-table-column>
+        <el-table-column
+          class="filter-column"
+          v-else-if="col.type == 'filters'"
+          :key="`table_filters${index}`"
+          :prop="col.prop"
+          :label="col.label"
+          :width="col.width"
+          :min-width="col.minWidth"
+          :align="col.align || 'left'"
+          :header-align="col['header-align'] || 'left'"
+          :show-overflow-tooltip="col.showOverflowTooltip || showOverflowTooltip"
+          :type="col.type || ''"
+          :fixed="col.fixed"
+          :formatter="col.formatter"
+          :column-key="col.prop"
+          :sortable="col.sortable || false"
+          :sort-method="col.sortMethod"
+          :sort-by="col.sortBy"
+          :sort-orders="col.sortOrders || ['ascending', 'descending', null]"
+          :filters="col.filters"
+          :filter-placement="col.filterPlacement"
+          :filter-multiple="col.filterMultiple || true"
+          :filter-method="col.filterMethod"
+          :filtered-value="col.filteredValue"
+        >
+          <template #default="scope">
+            <slot :name="col.prop" :row="scope.row" :$index="scope.$index"></slot>
+          </template>
+        </el-table-column>
+        <el-table-column
+          v-else-if="col.isFormatter"
+          :key="`table_formatter${index}`"
+          :prop="col.prop"
+          :label="col.label"
+          :width="col.width"
+          :min-width="col.minWidth"
+          :align="col.align || 'left'"
+          :header-align="col['header-align'] || 'left'"
+          :show-overflow-tooltip="col.showOverflowTooltip || showOverflowTooltip"
+          :type="col.type || ''"
+          :formatter="col.formatter"
+          :fixed="col.fixed"
+          :sortable="col.sortable || false"
+          :sort-method="col.sortMethod"
+          :sort-by="col.sortBy"
+          :sort-orders="col.sortOrders || ['ascending', 'descending', null]"
+        >
+        </el-table-column>
+        <el-table-column
+          v-else
+          :key="`table${index}`"
+          :prop="col.prop"
+          :label="col.label"
+          :width="col.width"
+          :min-width="col.minWidth"
+          :align="col.align || 'left'"
+          :header-align="col['header-align'] || 'left'"
+          :type="col.type || ''"
+          :formatter="col.formatter"
+          :fixed="col.fixed"
+          :sortable="col.sortable || false"
+          :sort-method="col.sortMethod"
+          :sort-by="col.sortBy"
+          :render-header="col.renderHeader"
+          :sort-orders="col.sortOrders || ['ascending', 'descending', null]"
+        >
+          <template #default="scope">
+            <el-tooltip
+              v-model="scope.row.showTooltip"
+              :key="`btn${index}`"
+              :effect="col.effect || 'dark'"
+              :content="scope.row[col.prop] + ''"
+              :disabled="!scope.row.showTooltip"
+              placement="top"
+              popper-class="tooltip__popper"
+              :hide-after="200000"
+            >
+              <p
+                class="breakTitle"
+                :style="typeof col.style === 'function' ? col.style(scope.row) : col.style"
+                :class="{ isClick: col.isClick, isPionter: col.clickFlag }"
+                @mouseenter="showTips($event, scope.row, scope.row[col.prop])"
+                @mouseleave="hideTips($event, scope.row, scope.row[col.prop])"
+                @click="() => col.clickHandler && col.clickHandler(scope.row)"
+              >
+                {{
+                  scope.row[col.prop] === null || scope.row[col.prop] === ''
+                    ? '--'
+                    : Array.isArray(scope.row[col.prop]) ? scope.row[col.prop].join(',') : scope.row[col.prop]
+                }}
+              </p>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+      </template>
+    </el-table>
+
+    <div class="footer-pagination" v-if="showPagination">
+      <el-pagination
+        :small="pageOptions['small']"
+        :background="pageOptions['background']"
+        :page-sizes="pageOptions['page-sizes']"
+        :page-size="pageOptions['page-size']"
+        :total="pageOptions['total']"
+        :pager-count="pageOptions['pager-count']"
+        :current-page="pageOptions['current-page']"
+        :layout="pageOptions['layout']"
+        :popper-class="pageOptions['popper-class']"
+        :prev-text="pageOptions['prev-text']"
+        :next-text="pageOptions['next-text']"
+        :disabled="pageOptions['disabled']"
+        :hide-on-single-page="pageOptions['hide-on-single-page']"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        @prev-click="handlePrevClick"
+        @next-click="handleNextClick"
+      >
+        <span class="totle-page">
+          共 {{ pageOptions['total'] }} 条记录 第 {{ pageOptions['current-page'] }} /
+          {{ Math.ceil(pageOptions['total'] / pageOptions['page-size']) }} 页
+        </span>
+      </el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, toRefs, defineComponent, reactive, toRef, onMounted, watch } from 'vue'
+import ElTableInfiniteScroll from 'el-table-infinite-scroll'
+export default defineComponent({
+  name: 'fgTable',
+  directives: {
+    'el-table-infinite-scroll': ElTableInfiniteScroll,
+  },
+  props: {
+    disabled: {
+      type: Boolean,
+      default: true,
+    },
+    scrollLoading: {
+      type: Boolean,
+      required: false,
+    },
+    defaultSort: {
+      type: Object,
+      default: () => {},
+    },
+    tableCols: {
+      type: Array,
+      default: () => [],
+    },
+    tableData: {
+      type: Array,
+      default: () => [],
+    },
+    showHeader: {
+      type: Boolean,
+      default: true,
+    },
+    reserveSelection: {
+      type: Boolean,
+      default: false,
+    },
+    rowClassName: {
+      type: Function,
+      default: () => {},
+    },
+    rowStyle: {
+      type: Function,
+      default: () => {},
+    },
+    cellClassName: {
+      type: Function,
+      default: () => {},
+    },
+    cellStyle: {
+      type: Function,
+      default: () => {},
+    },
+    stripe: {
+      type: Boolean,
+      default: true,
+    },
+    border: {
+      type: Boolean,
+      default: true,
+    },
+    showOverflowTooltip: {
+      type: Boolean,
+      default: true,
+    },
+    showPagination: {
+      type: Boolean,
+      default: false,
+    },
+    paginationOption: {
+      type: Object,
+      default: {},
+    },
+    spanMethod: {
+      type: Function,
+      default: () => {},
+    },
+    rowKey: {
+      type: [Function, String],
+      default: '',
+    },
+    empty: {
+      type: String,
+      default: '暂无数据',
+    },
+    //是否显示按钮
+    isHideBtn: {
+      type: Boolean,
+      default: false,
+    },
+    height: {
+      type: [Number, String],
+      default: null,
+    },
+    highlightCurrentRow: {
+      type: Boolean,
+      default: false,
+    },
+    //解决多选框动态不显示问题
+    tableRandom:{
+      type: [Number, String],
+      default: null,
+    }
+  },
+  emits: [
+    'row-click',
+    'row-dblclick',
+    'select',
+    'select-all',
+    'selection-change',
+    'sort-change',
+    'handleCommand',
+    'size-change',
+    'current-change',
+    'prev-click',
+    'next-click',
+    'page-current-change',
+    'filter-change',
+  ],
+  setup(props, ctx) {
+    const table = ref(null)
+    const state = reactive({
+      pageOptions: {
+        small: false,
+        background: true,
+        'page-sizes': [10, 20, 50, 100],
+        'page-size': 10,
+        total: 10,
+        'pager-count': 7,
+        'current-page': 1,
+        layout: 'slot, prev, pager, next, sizes, jumper',
+        'popper-class': null,
+        'prev-text': null,
+        'next-text': null,
+        disabled: false,
+        'hide-on-single-page': false,
+      },
+    })
+
+    onMounted(() => {
+      if (document.getElementsByClassName('el-pagination__jump')[0]) {
+        document.getElementsByClassName('el-pagination__jump')[0].childNodes[0].nodeValue = '跳至'
+      }
+    })
+    const methods = {
+      rowClick(row, column, event) {
+        ctx.emit('row-click', row, column, event)
+      },
+      rowDblclick(row, column, event) {
+        ctx.emit('row-dblclick', row, column, event)
+      },
+      select(selection, row) {
+        ctx.emit('select', selection, row)
+      },
+      selectAll(selection, row) {
+        ctx.emit('select-all', selection, row)
+      },
+      selectionChange(selection) {
+        ctx.emit('selection-change', selection)
+      },
+      currentChange(currentRow, oldCurrentRow) {
+        ctx.emit('current-change', currentRow, oldCurrentRow)
+      },
+      sortChange({ column, prop, order }) {
+        ctx.emit('sort-change', { column, prop, order })
+      },
+      clearSelection() {
+        table.value.clearSelection()
+      },
+      toggleRowSelection(row, selected) {
+        table.value.toggleRowSelection(row, selected)
+      },
+      toggleAllSelection() {
+        table.value.toggleAllSelection()
+      },
+      handleCommand(command) {
+        command.fn && command.fn(command.row)
+      },
+      // pageSize 改变时会触发
+      handleSizeChange(val) {
+        /* state.pageOptions = {
+                  ...state.pageOptions,
+                  'current-page': 1,
+                }; */
+        ctx.emit('size-change', val)
+      },
+      // currentPage 改变时会触发
+      handleCurrentChange(val) {
+        ctx.emit('page-current-change', val)
+      },
+      // 用户点击上一页按钮改变当前页后触发
+      handlePrevClick(val) {
+        ctx.emit('prev-click', val)
+      },
+      // 用户点击下一页按钮改变当前页后触发
+      handleNextClick(val) {
+        ctx.emit('next-click', val)
+      },
+      filterChange(filters) {
+        ctx.emit('filter-change', filters)
+      },
+      clearFilter() {
+        table.value.clearFilter()
+      },
+      mouseEnter(col, row) {
+        if (props.isHideBtn) {
+          row.isHideBtn = false
+          console.log(col, row)
+        }
+      },
+      mouseLeave(col, row) {
+        if (props.isHideBtn) {
+          row.isHideBtn = true
+        }
+      },
+    }
+    const getSelectionRows = () => {
+      return table.value.getSelectionRows()
+    }
+    const showTips = (obj, row, rowText) => {
+      if (!props.showOverflowTooltip) {
+        return
+      }
+      /*obj为鼠标移入时的事件对象*/
+      /*currentWidth 为文本在页面中所占的宽度，创建标签，加入到页面，获取currentWidth ,最后在移除*/
+      let TemporaryTag = document.createElement('span')
+      TemporaryTag.innerText = rowText
+      TemporaryTag.className = 'getTextWidth'
+      document.querySelector('body').appendChild(TemporaryTag)
+      let currentWidth = document.querySelector('.getTextWidth').offsetWidth
+      document.querySelector('.getTextWidth').remove()
+      // /*cellWidth为表格容器的宽度*/
+      const cellWidth = obj.target.offsetWidth
+      // /*当文本宽度小于||等于容器宽度两倍时，代表文本显示未超过两行*/
+      currentWidth <= 2 * cellWidth ? (row.showTooltip = false) : (row.showTooltip = true)
+    }
+    const hideTips = (obj, row, rowText) => {
+      if (!props.showOverflowTooltip) {
+        return false
+      }
+      row.showTooltip = false
+    }
+
+    if (props.showPagination) {
+      const _paginationOption = toRefs(props.paginationOption)
+      for (let k in _paginationOption) {
+        state.pageOptions[k] = _paginationOption[k]
+      }
+    }
+
+    watch(
+      () => props.showPagination,
+      (newData) => {
+        if (newData) {
+          const _paginationOption = toRefs(props.paginationOption)
+          for (let k in _paginationOption) {
+            state.pageOptions[k] = _paginationOption[k]
+          }
+        }
+      },
+    )
+
+    return {
+      ...toRefs(state),
+      table,
+      ...methods,
+      getSelectionRows,
+      showTips,
+      hideTips,
+    }
+  },
+})
+</script>
+<style>
+.el-table-filter__bottom {
+  display: flex !important;
+  justify-content: space-between !important;
+}
+
+.tooltip__popper {
+  max-width: 80% !important;
+  position: fixed !important;
+  z-index: 9999;
+}
+</style>
+<style scoped lang="scss">
+.fg-table-body {
+  .iconfont {
+    margin: 0 5px;
+    cursor: pointer;
+    font-size: 20px;
+  }
+
+  .el-icon {
+    vertical-align: middle;
+  }
+}
+
+.totle-page {
+  padding: 0 15px 0 5px;
+}
+
+:deep(.el-pagination__sizes) {
+  margin: 0 0 0 16px;
+}
+
+.hideBtn {
+  display: none;
+}
+
+:deep(.el-table) {
+  color: #253555 !important;
+}
+
+:deep(.el-table thead) {
+  color: #253555 !important;
+}
+
+.el-table__body tr:hover {
+  .hideBtn {
+    display: inline;
+  }
+}
+
+.col-disabled {
+  opacity: 0.4;
+}
+
+.breakTitle {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  word-break: break-all;
+}
+
+/*:deep(.el-table .cell) {
+  padding: 0 20px;
+}*/
+
+.isClick {
+  cursor: pointer;
+}
+/*筛选图标替换*/
+:deep(th .cell .el-icon:before) {
+  font-family: 'iconfont' !important;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-style: normal;
+  content: '\e654';
+}
+.isPionter {
+  cursor: pointer;
+}
+</style>