vue3使用element-plus的自定义列表格_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>
                    前言刚开始学习 vue3，也是刚使用 element-plus 这个 UI 组件库，虽说基本和 vue2 + element 差不多，但还是有点区别，以至于按以往的习惯来写发现报错，呃，琢磨了十来分钟，惭愧。element  中的自定义列表格用法自定义列时只需要声明 slot-scope="scope" 即可。自定义内容需要使用数据时只需要使用 scope.row 即可获取该行数据。&lt;template slot-scope="scope"&gt;  &lt;div class="overPo
				2022/09/02更新：
下边网友发现有新的方案：https://github.com/guolaopi/element-plus-table-dragable-demo 有上网条件的可以直接去github下载。
没有上网条件的可以在这里下载已经更新。
说明：本人前端小白不是什么骗子（我有4.5k多分没啥毛用），之前没有现成的组件就用Vuedraggable来实现，功能实现了但是不太友好。
=======以下是之前的说明=====
原创亲测至少节约小白两天时间，本人前端小白搞了好几天才实现表格拖动排序。在网上找的（vue3+sortable.js根本跑不起来）网上好多例子在vue3下根据跑不起来于是，也没有对表格排序的例子。Vuedraggable 是基于并提供Sortable.js的所有功能。重用现有element-plus组件库。对于小白来说怎么在Vuedraggable里使用element组件提供了实际应用参考。table样式完全模拟了el-table组件样式。看官方文档两天也不如直接看一个完整的实例。
需要安装依赖：npm i -S vuedraggable@next
					[TypeScript] [table, table-column] vue3+Ts ＜template #default=“scope“＞ scope.row 报错 对象的类型为 “unknown
				最近项目有个需求针对到el-table这个组件。自己也是第一次这样来使用，特写下这两篇文章，算是当做记录吧！如果是从第一次使用elementUI的话，可以移步另一篇文章作为参考~
产品需求样式
既想用elementUI的table样式和功能，简单的<tr><th><td>是不能满足的
在使用element-ui的el-table组件时，最普遍的做法就是使用el-table-column；其中columns对应el-table-column Att.
				最近的项目中使用到element-ui组件库，由于做的是后台管理系统，所以经常需要操作表格，编辑样式的过程中遇到一些问题，官网针对table给出了很多的api，自己可以自定义，基本能满足产品需求，但是没有给出具体的案例，网上的资料也比较简略，这里简单整理下一些常用的操作，如果有类似的功能可以做一个参考。
具体的使用方法还是建议仔细阅读官网-table章节：
https://element.eleme.cn/#/zh-CN/component/table#table-column-scoped-slot..
				想要在表格中自定义列内容，是通过在el-table-column中使用slot实现的。
比如我现在传入表格的列内容需要格式化字符串再输出，就需要用到这个特性。
首先上一段代码，3行两列的数据，我需要在name显示的数据前都加个a字符，为了测试这个过程，我在showname这个函数内打印下调用编号。
<template>
    <el-table :data="tableData" style="width: 100%">
    <el-table-column pr
1、后台管理系统用到的表格、分页很多，所以不能每个页面都写一次，通过组件通讯方式封装
2、项目选型：vite + ts + vue3
3、全篇采用<script setup>语法糖形式
4、通过带着读者手写简化版 封装技巧，了解 核心原理。全文极简备注！在书写的过程中会摘取整体框架中的核心逻辑，简化代码实现过程，保留核心功能，例如：生命周期、上下文、api使用、资源处理等内容实现。
适合人群：
1、具备一定编程基础，工作1-3年的研发人员
能学到什么：
封装技巧、api使用、
阅读建议：
此资源以开发简化版element-plus学习其原理和内核，不仅是代码编写实现也更注重内容上的需求分析和方案设计，所以在学习的过程要结合这些内容一起来实践，并调试对应的代码。
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
Vue.use(ElementPlus)
最后，就可以在Vue组件中使用Element Plus的组件了。
注意：需要引入element-plus的样式文件。