el-table 表格内容超出 省略号 显示

一、效果：

样式： 鼠标移入靠近即可可展开查看：

二、代码：

<template>
<el-table :data="tableList" border ref="table" 
                @selection-change="handleSelectionChange"
                  :cell-style="{ 'text-align': 'center' }" :header-cell-style="{
                      background: '#fff',
                      color: '#909399',
                      height: '35px',
                      'text-align': 'center'
                  }" stripe v-loading="loading">
      <el-table-column type="selection" width="40px" />
      <el-table-column label="编号" prop="code" width="120px"/>
      <el-table-column label="姓名" prop="name" width="120px"/>
      <el-table-column label="备注" prop="remark"> 
          <template #default="scope">
               <div class="memo-cell">
                   {{ scope.row.remark}}
               </div>
          </template>
      </el-table-column> 
</el-table>
</template>
<script setup>
const table = ref()
const loading = ref(false)
const tableList = ref([
    {
        id: null,
        code:'',
        name:'',
        remark:''
    } 
])
const multipleSelection = ref([])
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}

</script>

<style scoped>

.memo-cell {
  width: 80px; 
  white-space: nowrap;
  overflow: hidden; 
  text-overflow: ellipsis;
  display: inline-block;
}

.memo-cell:hover {
  overflow-x: auto;
  white-space: normal;
}

</style>