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

简介: 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>
相关文章
element-ui和element-plus的自定义列表格用法
element-ui和element-plus的自定义列表格用法
116 0
element-ui 表格打印
element-ui 表格打印
298 0
element Plus 表格嵌套其他组件的使用
element Plus 表格嵌套其他组件的使用
227 0
|
9月前
【UI】 element -ui select下拉框label显示多个值
【UI】 element -ui select下拉框label显示多个值
266 1
在vue使用class选择器和下标更改点击列表样式
在vue使用class选择器和下标更改点击列表样式
163 0
|
9月前
【UI】 element ui 表格没有数据时用--填充
【UI】 element ui 表格没有数据时用--填充
211 2

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等