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

前言

 element-plus 这个 UI 组件库，虽说基本和 vue2 + element-ui 差不多，但还是有点区别，以至于按emenent-ui的写法来写会发现报错，下面我将讲解一下element-ui和element-plus的自定义表格的用法

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>

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

  <el-table-column  label="操作" align="center">
     <template v-if="true" v-slot:default="scope">
       <el-button type="primary" size="small" @click="bj"><el-icon><Edit /></el-icon> <span style="margin-left: 3px">编辑</span></el-button>
       <el-button type="danger" size="small" @click="sc(scope.row)"><el-icon><Delete /></el-icon> <span style="margin-left: 3px">删除</span></el-button>
     </template>
    </el-table-column>