element表格搜索，字符超出...显示，排序

记录element表格使用，

<template>
  <el-table :data="tableData?.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
    style="width: 100%" border :default-sort="{ prop: 'date', order: 'descending' }">
    <!-- tableData为绑定的数据 -->
    <!-- data.name为要查询的字段 -->
    <el-table-column label="日期" prop="date" align="center" sortable />
    <!-- 添加sortable可以实现排序功能 -->
    <el-table-column label="姓名" prop="name" align="center" />
    <!-- align="center"可以实现每列内容居中 left，right-->
    <el-table-column label="住址" prop="address" align="center" show-overflow-tooltip />
    <!--  show-overflow-tooltip、、、  element中超出隐藏，会以hover显示，使用的时候css中不要加上scoped不然没效果 -->
    <el-table-column label="公司地址" prop="company" align="center" :formatter="stateFormat" />
    <!--  :default-sort="{ prop: 'date', order: 'descending' }"  :formatter="stateFormat" element中字符超出隐藏 -->
    <el-table-column align="center">
      <template #header>
        <el-input v-model="search" placeholder="输入姓名搜索" clearable />
      </template>
      <template #default="scope">
        <el-button @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
        <el-button type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '张三',
          address: '上海市普陀区金沙江路 1518 弄',
          company: '上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '李四',
          address: '上海市普陀区金沙江路 1517 弄上海市普陀区金沙江路 1517 弄上海市普陀区金沙江路 1517 弄上海市普陀区金沙江路 1517 弄上海市普陀区金沙江路 1517 弄上海市普陀区金沙江路 1517 弄上海市普陀区金沙江路 1517 弄',
          company: '上海市普陀区金沙江路 1518 弄 '
        },
        {
          date: '2016-05-01',
          name: '王五',
          address: '上海市普陀区金沙江路 1517 弄上海市普陀区金沙江路 1517 弄上海市普陀区金沙江路 1517 弄上海市普陀区金沙江路 1517 弄上海市普陀区金沙江路 1517 弄上海市普陀区金沙江路 1517 弄上海市普陀区金沙江路 1517 弄',
          company: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-02',
          name: '张六',
          address: '上海市普陀区金沙江路 1517 弄上海市普陀区金沙江路 1517 弄上海市普陀区金沙江路 1517 弄上海市普陀区金沙江路 1517 弄上海市普陀区金沙江路 1517 弄上海市普陀区金沙江路 1517 弄上海市普陀区金沙江路 1517 弄',
          company: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '李七',
          address: '上海市普陀区金沙江路 1517 弄上海市普陀区金沙江路 1517 弄上海市普陀区金沙江路 1517 弄上海市普陀区金沙江路 1517 弄上海市普陀区金沙江路 1517 弄上海市普陀区金沙江路 1517 弄上海市普陀区金沙江路 1517 弄',
          company: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-01',
          name: '王九',
          address: '上海市普陀区金沙江路 1517 弄上海市普陀区金沙江路 1517 弄上海市普陀区金沙江路 1517 弄上海市普陀区金沙江路 1517 弄上海市普陀区金沙江路 1517 弄上海市普陀区金沙江路 1517 弄上海市普陀区金沙江路 1517 弄',
          company: '上海市普陀区金沙江路 1518 弄'
        },
      ],
      search: ''
    }
  },
  methods: {
    // 超出长度限制....显示
    stateFormat(row, column, cellValue) {
      if (!cellValue) return ''
      if (cellValue.length > 10) {       //最长固定显示10个字符
        return cellValue.slice(0, 10) + '...'
      }
      return cellValue
    },
    // 删除操作
    handleDelete(index) {
      // 二次确认删除
      this.$confirm('确定要删除吗？', '提示', {
        type: 'warning'
      })
        .then(() => {
          this.$message.success('删除成功');
          this.tableData.splice(index, 1);
        })
        .catch(() => { });
    },
  },
}
</script>


<style>
/* 公司简介hover */
.el-popper.is-dark {
  max-width: 50% !important;
  line-height: 24px;
  color: #fff !important;
}

/* 公司简介hover */
</style>