6月24号-6月30号的实习总结之内容过多隐藏，鼠标悬停能显示所有内容

element ui中的table组件的属性

1.当你的需求是，当以单元格一行不能容下所有内容的时候，隐藏多余的内容，可以用到的属性是show-overflow-tooltip

注意，该属性是只能是在一行内，多于一行是不行的

我之前遇到的项目是，是引用一个table公共组件，

要在使用该公共组件的地方，将相应的值传过来

效果

2.当你的需求是，字体多于300个字的时候才隐藏，鼠标悬停显示所有内容

组件中

在这里判断判断一下，如果字超过300字就隐藏，鼠标悬停

 <span v-show="row[item.label] && row[item.label].length < 300" class="td-cell"> {{ row[item.label] }}</span>
 <el-popover
    v-show="row[item.label] && row[item.label].length > 300"
    placement="top"
    title=""
    width="600"
    trigger="hover"
    :content="row[item.label]"
  >
    <span slot="reference">{{ row[item.label] ? row[item.label].substr(0,300) : '' }}...</span>
  </el-popover>

通过文字的长度来控制显示那种类型
通过js方法substr()来分割多少文字来显示
通过三元表达式来根据条件来显示

效果

公共组件的所有代码

<template>
  <div ref="wrap" class="wrap">
    <!--
      span-method	合并行或列的计算方法
      stripe	是否为斑马纹 table
      data	显示的数据
      在每次切换页面的时候，置换key就可以
      header-row-class-name	表头行的 className 的回调方法，也可以使用字符串为所有表头行设置一个固定的 className。
      height	Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式
      border	是否带有纵向边框
      selection-change	当选择项发生变化时会触发该事件
     -->
    <el-table
      ref="table"
      :key="'tableData'+tableData.length"
      :data="tableData"
      :stripe="stripe"
      :span-method="spanMethod"
      :header-row-class-name="headerRowClassName(radio)"
      :height="setTableH?setTableHeight:'100%'"
      class="table-list"
      border
      @selection-change="handleSelectionChange"
    >
      <template slot="empty">
        <img src="@/assets/images/empty.png">
        <p>暂无数据</p>
      </template>

      <!--选择框-->
      <!-- 通过showSelection来控制
      selectable	仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选
       -->
      <el-table-column v-if="showSelection" type="selection" width="40" :selectable="checkSelectable" />
      <!--序号-->
      <!-- 通过showIndex来控制
      align	对齐方式
      type="index"就是table有序号了
       -->
      <el-table-column v-if="showIndex" type="index" label="序号" width="55" align="center" />
      <!--
        在每次切换页面的时候，置换key就可以
        label	显示的标题
        prop	对应列内容的字段名，也可以使用 property 属性
        min-width	对应列的最小宽度，与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
        sortable	对应列是否可以排序，如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件
        show-overflow-tooltip	当内容过长被隐藏时显示 tooltip
        align	对齐方式
        -->
      <el-table-column
        v-for="item in columns"
        :key="item.lable"
        :label="item.title"
        :prop="item.lable"
        :min-width="item.minWidth || 140"
        :width="item.width"
        :sortable="item.sortable"
        :show-overflow-tooltip="item.overflow"
        :align="item.align"
      >
        <template slot-scope="{ row }">
          <slot :name="item.slot" :row="row">
            <!-- isImportData：判断是否导入的数据 -->
            <span v-show="row[item.label] && row[item.label].length < 300" class="td-cell"> {{ row[item.label] }}</span>
            <el-popover
              v-show="row[item.label] && row[item.label].length > 300"
              placement="top"
              title=""
              width="600"
              trigger="hover"
              :content="row[item.label]"
            >
              <span slot="reference">{{ row[item.label] ? row[item.label].substr(0,300) : '' }}...</span>
            </el-popover>
            <template v-if="isImportData">
              <!--
                Popover 弹出框
                trigger	触发方式
                title	标题
                content	显示的内容，也可以通过 slot 传入 DOM
              -->
              <el-popover
                v-if="typeof(row[item.label].success) === 'boolean' && !row[item.label].success"
                placement="top"
                title=""
                trigger="hover"
                :content="row[item.label].message"
              >
                <i slot="reference" class="el-icon-warning" style="color:#F44336" />
              </el-popover>
            </template>
          </slot>
        </template>
      </el-table-column>

      <!--操作按钮-->
      <!--
        showOpear：判断是否导入的数据
        prop	对应列内容的字段名，也可以使用 property 属性
        fixed	列是否固定在左侧或者右侧，true 表示固定在左侧
       -->
      <el-table-column v-if="showOpear" label="操作" prop="operation" :width="fixWidth" fixed="right">
        <template #default="{ row, $index }">
          <slot :row="row" :$index="$index" />
        </template>
      </el-table-column>

    </el-table>
    <!--
      showPagination控制分页的显示
      background	是否为分页按钮添加背景色
      current-page	当前页数，支持 .sync 修饰符
      page-size	每页显示条目个数，支持 .sync 修饰符
      page-sizes	每页显示个数选择器的选项设置
      current-change	currentPage 改变时会触发
      size-change	pageSize 改变时会触发
     -->
    <el-pagination
      v-if="showPagination && tableData.length>0"
      background
      :current-page="pageData.page"
      :page-size="pageData.rows"
      :page-sizes="pageData.pageSize"
      layout="sizes, prev, pager, next, slot, jumper"
      :total="pageData.total"
      class="pagination"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    >
      <span class="pagination-total">共{{ pageData.total }}条，</span>
    </el-pagination>
  </div>
</template>

<script>
import { clone } from 'lodash'
// import { filters } from '@/utils/filter';
export default {
  name: 'TableList',
  props: {
    // 表格的总数据
    testdata: {
      type: Array,
      default: () => {
        return []
      }
    },
    tableData: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 应该是表头名
    columns: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 操作项的宽度
    fixWidth: {
      type: Number,
      default: 150
    },
    radio: {
      type: Boolean,
      default: false
    },
    // 序号是否显示
    showIndex: {
      type: Boolean,
      default: false
    },
    // table的高度
    setTableH: {
      type: Boolean,
      default: true
    },
    // 选择框的显示
    showSelection: {
      type: Boolean,
      default: false
    },
    // 操作按钮的显示
    showOpear: {
      type: Boolean,
      default: false
    },
    // 合并行或列的计算方法
    spanMethod: {
      type: Function
    },
    // 斑马线的显示
    stripe: {
      type: Boolean,
      default: false
    },
    // 分页的显示
    showPagination: {
      type: Boolean,
      default: true
    },
    setCheckbox: {
      type: Boolean,
      default: false
    },
    // 文本的位置
    align: {
      type: String
    },
    // 分页的默认数据
    pageData: {
      type: Object,
      default: () => {
        return {
          page: 1,
          rows: 15,
          pageSize: [15, 25, 35],
          total: 0
        }
      }
    },
    isImportData: { // 判断是否导入的数据
      type: Boolean,
      default: false
    },
    disabledSelectKey: { // 需要禁用的选择框的数据
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      setTableHeight: 300
    }
  },
  computed: {
    // header-row-class-name	表头行的 className 的回调方法，也可以使用字符串为所有表头行设置一个固定的 className。
    headerRowClassName() {
      return (radio) => {
        if (radio) {
          return 'tableHead isRadio'
        } else {
          return 'tableHead'
        }
      }
    }
  },
  mounted() {
    // this.$nextTick 将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新。
    this.$nextTick(() => {
      console.log('1', this.$refs.wrap)
      // console.log('pagination', document.querySelector('.el-pagination'))
      this.setTableHeight = this.$refs.wrap.offsetHeight - 50
      // console.log('1441', this.setTableHeight)
      // console.log('分页', document.querySelector('.el-pagination').offsetHeight)
      // console.log('表头', document.querySelector('.el-table__header-wrapper').offsetHeight)
      // console.log('总数', this.$refs.wrap.offsetHeight)
    })
    // this.test()
  },
  methods: {
    test() {
      console.log('分页', this.pageData)
      this.tableData.forEach((res) => {
        console.log('1835', res)
      })
      console.log('tabl1e数据', this.tableData[0].id)
      console.log('表头数据', this.columns)
    },
    // formatDate(date, dateType) {
    //     return filters.formatDate(date, dateType || 'yyyy-MM-dd');
    // },
    // pageSize 改变时会触发，调用父组件的方法
    handleSizeChange(e) {
      this.$emit('changeSize', e)
    },
    // current-change	currentPage 改变时会触发
    handleCurrentChange(e) {
      this.$emit('changePage', e)
    },
    // clearSort	用于清空排序条件，数据会恢复成未排序的状态
    clearSort() {
      this.$refs.table.clearSort()
    },
    getSelection() {
      return clone(this.$refs.table.selection)
    },
    // 选择框的方法
    checkSelectable(row) {
      let check = true
      // disabledSelectKey:选择框的数据
      if (this.disabledSelectKey.length > 0) {
        this.disabledSelectKey.forEach(item => {
          if (row[item.label] === item.value) {
            check = false
          }
        })
      }
      return check
    },
    handleSelectionChange(val) {
      // 单选
      // clearSelection	用于多选表格，清空用户的选择
      // 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中
      if (this.radio) {
        if (val.length > 1) {
          this.$refs.table.clearSelection()
          this.$refs.table.toggleRowSelection(val.pop())
        }
      }
      this.$EventBus.$emit('selection-change', val)
      // this.$emit('selection-change', val)
    }
  }

}
</script>
<style lang="scss">
   .wrap{
     height: 100%;
      ::v-deep .isRadio {
        .el-checkbox{
          display: none;
        }
      }
   }
</style>