前言

刚开始学习 vue3，也是刚使用 element-plus 这个 UI 组件库，虽说基本和 vue2 + element 差不多，但还是有点区别，以至于按以往的习惯来写发现报错，呃，琢磨了十来分钟，惭愧。

element 中的自定义列表格用法

自定义列时只需要声明 slot-scope="scope" 即可。自定义内容需要使用数据时只需要使用 scope.row 即可获取该行数据。

<template slot-scope="scope">
  <div class="overPointr2">
    {{scope.row.address}}
  </div>
</template>

完整的代码：

<el-table
  :data="tableData"
   style="width: 100%">
 <el-table-column
     type="index"
     width="50">
 </el-table-column>
 <el-table-column
     prop="name"
     label="姓名"
     min-width="120">
 </el-table-column>
 <el-table-column
     label="地址"
     min-width="300">
   <template slot-scope="scope">
     <div class="overPointr2">
       {{scope.row.address}}
     </div>
   </template>
 </el-table-column>
 <el-table-column
     label="操作"
     min-width="120">
   <template slot-scope="scope">
     <el-button
         @click.native.prevent="deleteRow(scope.$index, tableData)"
         type="text"
         size="small">
       移除
     </el-button>
   </template>
 </el-table-column>
</el-table>

element-plus 中的自定义列表格用法

跟 element 差不多，只不过不再是声明 slot-scope="scope"，而是按需声明 #default 或者 #default="scope"。

• 自定义内容需要使用该行数据时，声明 #default="scope"，再通过 scpoe.row 获取数据。

  <el-table-column
     fixed="right"
      label="操作"
      width="100">
    <template #default="scope">
      <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
      <el-button type="text" size="small">编辑</el-button>
    </template>
  </el-table-column>
  

• 自定义内容不需要使用该行数据时，声明 #default，如果继续声明 #default="scope" 则会报错 scope 没使用。

  <el-table-column
      label="日期">
    <template #default>
      <span>2021-05-23 21:22:37</span>
    </template>
  </el-table-column>