devbox
我家自动化
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【Vue】中el-table数据项扩展各种类型总结（持续更新）

作者：我家自动化 | 2024-04-15 06:48:54

赞

踩

el-table

目录

前言

一、普通数据处理

el-table数据项调用方法处理值

el-table数据项动态加不同颜色圆点

el-table数据项项使动态el-tag

二、其他插槽类型处理

el-table数据项加入输入框

el-table数据项上传按钮

el-table数据项过长截取并且悬浮显示所有文字

el-table数据项el-link链接跳转

el-table数据项el-select下拉框，选中后请求接口

el-table数据项el-switch插槽渲染

三、往期优质相关推荐

前言

  • el-table普通数据往往需要进行加工再进行展示
  • 这是对一些常用场景的处理代码或组件封装总结
  • 方便再次使用时查阅

一、普通数据处理

el-table数据项调用方法处理值

        使用el-table组件时，可以通过调用方法来处理el-table的数据项的值。你可以在el-table的template中调用methods中定义的方法来处理数据项的值。

下面是一个示例代码：

  1. <template>
  2.   <el-table :data="tableData">
  3.     <el-table-column label="ID" prop="id">
  4.       <template slot-scope="scope">
  5.         {{ formatId(scope.row.id) }}
  6.       </template>
  7.     </el-table-column>
  8.     <el-table-column label="Name" prop="name"></el-table-column>
  9.   </el-table>
  10. </template>
  11.  
  12. <script>
  13. export default {
  14.   data() {
  15.     return {
  16.       tableData: [
  17.         { id: 1, name: 'John' },
  18.         { id: 2, name: 'Jane' },
  19.       ],
  20.     };
  21.   },
  22.   methods: {
  23.     formatId(id) {
  24.       // 在这里可以对id进行处理
  25.       return '#' + id;
  26.     },
  27.   },
  28. };
  29. </script>

在上面的代码中，我们定义了一个el-table组件，并通过:data属性绑定数据。在el-table-column的template中，我们使用了slot-scope来获取el-table的每一行数据（scope.row）。然后在模板中调用formatId方法对id进行处理，返回处理后的id值。

在formatId方法中，你可以按照你的需求对id进行任何处理，然后返回处理后的值。例如，在上面的示例中，我们在id前面添加了一个井号作为格式化后的值。

这样，当el-table渲染时，会自动调用formatId方法来处理id的值，并显示格式化后的值。

el-table数据项动态加不同颜色圆点

  1. <el-table-column prop="status" label="数据状态" header-align="center" width="200">
  2. <template slot-scope="scope">
  3.   <div style="display: flex; justify-content: center; align-items: center;">
  4. 	<span slot="reference" style=" margin-right: 8px;">
  5. 	  <i class="dotClass" :style="getColor(scope.row.status)"></i>
  6. 	</span>
  7. 	{{ paramFormat(scope.row.status) }}
  8.   </div>
  9. </template>
  10. </el-table-column>
  11.  
  12.  
  13. getColor(data) {
  14.   if (data == "one") {
  15. 	return "#67C23A";
  16.   } else if (data == "two") {
  17. 	return "#F56C6C";
  18.   }
  19. 	...
  20. },
  21.  
  22.  
  23.  
  24. .dotClass {
  25.   width: 12px;
  26.   height: 12px;
  27.   border-radius: 50%;
  28.   display: block;
  29. }

el-table数据项项使动态el-tag

要在在el-table的数据项中使用动态的el-tag，可以通过自定义列模板来实现。

首先，确保已引入Element UI库和Vue：

  1. <template>
  2.   <el-table :data="tableData">
  3.     <el-table-column label="姓名" prop="name"></el-table-column>
  4.     <el-table-column label="标签" prop="tags">
  5.       <template slot-scope="scope">
  6.         <el-tag v-for="tag in scope.row.tags" :key="tag" :type="tag.type">{{ tag.name }}</el-tag>
  7.       </template>
  8.     </el-table-column>
  9.   </el-table>
  10. </template>

在上面的例子中，我们使用了el-table-column来定义列，同时使用了slot-scope来访问每一行的数据。然后，我们在列模板中使用v-for指令来遍历每个人的tags数组，并为每个标签创建一个动态的el-tag。

需要注意的是，这里的type属性使用了:type="tag.type"，这样我们可以根据每个标签的类型来设置不同的样式。

接下来，定义表格数据和标签数据：

  1. data() {
  2.   return {
  3.     tableData: [
  4.       {
  5.         name: '张三',
  6.         tags: [{ name: '标签1', type: 'success' }, { name: '标签2', type: 'warning' }]
  7.       },
  8.       {
  9.         name: '李四',
  10.         tags: [{ name: '标签3', type: 'info' }, { name: '标签4', type: 'danger' }]
  11.       }
  12.     ]
  13.   };
  14. }

在上面的例子中，我们有两个人的数据，每个人都有一个tags数组，数组中包含了每个人的标签信息。

这样，我们就可以在el-table的数据项中使用动态的el-tag了，每个人的标签会根据不同的类型显示不同的样式。

组件化代码举例

需配置columns: columns某一项添加 render 函数（传值：当前值、整行数据、第几行）

  1. <template>
  2.   <div class="t-table" style="width:100%;">
  3.     <t-table :table="table" :columns="table.columns" />
  4.   </div>
  5. </template>
  6. <script>
  7. export default {
  8.   data() {
  9.     return {
  10.       table: {
  11.         data: [
  12.           {
  13.             id: '1',
  14.             date: '2019-09-25',
  15.             name: '张三',
  16.             status: '2',
  17.             address: '广东省广州市天河区'
  18.           },
  19.           {
  20.             id: '2',
  21.             date: '2019-09-26',
  22.             name: '张三1',
  23.             status: '1',
  24.             address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2'
  25.           },
  26.           {
  27.             id: '3',
  28.             date: '2019-09-27',
  29.             name: '张三2',
  30.             status: '3',
  31.             address: '广东省广州市天河区3'
  32.           }
  33.         ],
  34.         columns: [
  35.           { prop: 'name', label: '姓名', minWidth: '100' },
  36.           {
  37.             prop: 'status',
  38.             label: 'render渲染1',
  39.             minWidth: '180',
  40.             render: (text, row, index) => {
  41.               // console.log(777, text, row, index)
  42.               let type = ''
  43.               let val = ''
  44.               switch (text) {
  45.                 case '1':
  46.                   type = ''
  47.                   val = '待处理'
  48.                   break
  49.                 case '2':
  50.                   type = 'warning'
  51.                   val = '进行中'
  52.                   break
  53.                 case '3':
  54.                   type = 'success'
  55.                   val = '已完成'
  56.                   break
  57.               }
  58.               return (
  59.                 <el-tag type={type}>
  60.                   {val}
  61.                 </el-tag>
  62.               )
  63.             }
  64.           },
  65.           {
  66.             prop: 'status',
  67.             label: 'render渲染2',
  68.             minWidth: '180',
  69.             render: (text, record) => {
  70.               return (
  71.                 <el-switch
  72.                   active-value={'1'}
  73.                   inactive-value={'2'}
  74.                   v-model={record.enableStatus}
  75.                   onChange={() => this.handleStatusChange(record)}
  76.                 >
  77.                   {text}
  78.                 </el-switch>
  79.               )
  80.             },
  81.           },
  82.           { prop: 'address', label: '地址', minWidth: '220' },
  83.           { prop: 'date', label: '日期', minWidth: '180' },
  84.           { prop: 'address', label: '地址', minWidth: '220' }
  85.         ],
  86.       },
  87.     }
  88.   },
  89.   methods: {
  90.     // 状态修改
  91.     handleStatusChange(row) {
  92.       let text = row.status === '1' ? '启用' : '废止'
  93.       this.$confirm(`确认要${text}这条数据吗？`, '警告', {
  94.         confirmButtonText: '确定',
  95.         cancelButtonText: '取消',
  96.         type: 'warning'
  97.       }).then(() => {
  98.         this.$message.success(`点击确定`)
  99.       }).catch(() => {
  100.         console.log('取消')
  101.         row.status = row.status === '1' ? '2' : '1'
  102.       })
  103.     },
  104.     // 新增
  105.     add(val) {
  106.       console.log('新增', val)
  107.     },
  108.     // 编辑
  109.     edit(val) {
  110.       console.log('编辑', val)
  111.     },
  112.     // 删除
  113.     handleDelete(val) {
  114.       console.log('删除', val)
  115.     }
  116.   }
  117. }
  118. </script>

二、其他插槽类型处理

el-table数据项加入多个按钮

  1.   <el-table-column fixed="right" label="操作" width="100">
  2.     <template slot-scope="scope">
  3.       <el-button type="text" size="mini" :disabled="disFlag" @click="balabala(scope.row)">编辑</el-button>
  4.     </template>
  5.     <template slot-scope="scope">
  6.       <el-button type="text" size="mini" @click="bala(scope.row)">详情</el-button>
  7.     </template>
  8.   </el-table-column>
  1.     //balabala
  2.     balabala(row) {
  3.       this.$router.push(
  4.         "/bala/gaga/detail?
  5.         id=" + row.id +
  6.         "&name=" + row.name
  7.       );
  8.     },
  9.  
  10.     //bala
  11.     bala: function (row) {
  12.       this.$router.push({
  13.         path: "/bala/neinei/detail",
  14.         query: {
  15.           id: row.id,
  16.           name: row.name,
  17.           type: row.type,
  18.         },
  19.       });
  20.     },

el-table数据项加入输入框

简单举例

  1. <el-table-column prop="reality_fans" label="输入框" show-overflow-tooltip>
  2.       <template slot-scope="scope">
  3.           <el-input v-model="scope.row.remark" @change="changeInput"  placeholder="请输入内容" ></el-input>
  4.       </template>
  5. </el-table-column>

要在el-table-table的数据项中加入输入框，可以通过自定义列模板来实现。

首先，确保已引入Element UI库和Vue：

  1. <template>
  2.   <el-table :data="tableData">
  3.     <el-table-column label="姓名" prop="name"></el-table-column>
  4.     <el-table-column label="标签">
  5.       <template slot-scope="scope">
  6.         <el-input v-model="scope.row.input" placeholder="请输入标签"></el-input>
  7.       </template>
  8.     </el-table-column>
  9.   </el-table>
  10. </template>

在上面的例子中，我们使用了el-table-column来定义列，同时使用了slot-scope来访问每一行的数据。然后，在列模板中使用el-input来创建一个输入框，并使用v-model指令来双向绑定每个人的input属性。

需要注意的是，我们使用了scope.row.input来绑定每个输入框的值，确保每个输入框都有独立的值。

接下来，定义表格数据：

  1. data() {
  2.   return {
  3.     tableData: [
  4.       {
  5.         name: '张三',
  6.         input: ''
  7.       },
  8.       {
  9.         name: '李四',
  10.         input: ''
  11.       }
  12.     ]
  13.   };
  14. }

在上面的例子中，我们有两个人的数据，每个人都有一个input属性，用于保存输入框的值。

这样，我们就可以在el-table的数据项中加入输入框了，每个人都有独立的输入框，可以根据需要进行输入操作。

el-table数据项上传按钮

可以通过自定义列插槽来实现添加上传文件按钮的功能。

首先，在 el-table 中添加一个自定义列插槽，用于显示上传文件按钮。可以通过 slot-scope 属性来获取当前行的数据项信息：

  1. <el-table v-bind:data="tableData">
  2.   <el-table-column>
  3.     <template slot-scope="scope">
  4.       <!-- 显示上传文件按钮 -->
  5.     </template>
  6.   </el-table-column>
  7.   <!-- 其他列定义 -->
  8. </el-table>

在自定义列插槽中添加一个 el-upload 组件来实现文件上传功能。在上传按钮的点击事件中，可以通过 scope.row 获取当前行的数据项信息，并执行相应的上传逻辑：

  1. <el-table v-bind:data="tableData">
  2.   <el-table-column>
  3.     <template slot-scope="scope">
  4.       <!-- 显示上传文件按钮, :auto-upload="false"不然会上传两次 -->
  5. 		<el-upload
  6. 		  action
  7. 		  v-if="true"
  8. 		  :show-file-list="false"
  9. 		  :auto-upload="false"
  10. 		  :on-change="(file, fileList) => uploadBiu(scope.row, file, fileList)"
  11. 		>
  12.         <el-button size="small" type="text" icon="el-icon-upload">
  13.           上传文件
  14.         </el-button>
  15.       </el-upload>
  16.     </template>
  17.   </el-table-column>
  18.   <!-- 其他列定义 -->
  19. </el-table>

在 Vue 组件的 methods 中定义上传文件的各个回调函数，进行相关的数据处理和反馈：

  1. methods: {
  2.   uploadBiu(file) {
  3.     // 上传处理逻辑
  4.   },
  5. }

当用户点击上传文件按钮时，el-upload 组件将触发相应的事件，并将文件信息传递给回调函数，你可以在回调函数中进行相应的处理，例如发送请求上传文件、更新表格数据等。

那多个按钮呢, 传参插槽v-for即可  或者直接加

el-table数据项过长截取并且悬浮显示所有文字

vue中使用table展示列表信息时，如果信息太长展示会很丑不美观，而且悬浮框拷贝不太友好

  1. <el-table-column prop="measures" label="companyName">
  2.         <template slot-scope="scope">
  3.           <el-popover
  4.                     placement="top"
  5.                     width="300"
  6.                     trigger="hover"
  7.                     :disabled="scope.row.companyName&& scope.row.companyName.length <= 20"
  8.             >
  9.                 <div>{{ scope.row.measures }}</div>
  10.                 <span slot="reference" v-if="scope.row.companyName&& scope.row.companyName.length <= 20">{{scope.row.companyName}}</span>
  11.                 <span slot="reference" v-if="scope.row.companyName&& scope.row.companyName.length > 20">{{scope.row.companyName.substr(0, 20) + "..."}}</span>
  12.           </el-popover>
  13.         </template>
  14.       </el-table-column>

由于会对结果进行判断.length()和处理subdtr(),  数据获取不及时, 会导致报错,  所以需要加个v-if 请求接口数据获取完毕后再进行处理

el-table数据项el-link链接跳转

要在VueVue的el-table中使用el-link实现数据项的链接跳转，你可以使用作用域插槽和事件监听器来实现。

首先，你需要在el-table-column中使用作用域插槽来定义el-link的显示内容和点击事件。如下所示：

  1. <el-table-column label="Link">
  2.   <template slot-scope="scope">
  3.     <el-link type="primary" @click="handleLinkClick(scope.row)">{{ scope.row.linkText }}</el-link>
  4.   </template>
  5. </el-table-column>

在这个示例中，我们将el-link放置在el-table-column的作用域插槽中，并使用scope.row来访问每个数据项的属性。我们还定义了@click事件监听器来处理链接的点击事件，并将当前数据项作为参数传递给handleLinkClick方法。

接下来，你可以在Vue组件的methods中定义handleLinkClick方法来处理链接的点击跳转。如下所示：

  1. methods: {
  2.   handleLinkClick(row) {
  3.     // 在这里执行跳转到目标链接的逻辑
  4.     window.location.href = row.link;
  5.   }
  6. }

在handleLinkClick方法中，你可以使用window.location.href来实现页面的跳转。你可以根据数据项中的属性来确定目标链接，然后跳转到相应的页面。

这样，你就可以在Vue的el-table中使用el-link实现数据项的链接跳转了。当用户点击链接时，会触发handleLinkClick方法，并跳转到目标链接所指定的页面。

el-table数据项el-select下拉框，选中后请求接口

简单举例

  1.   <el-table-column prop="type" label="类型" width="120">
  2.     <template scope="scope">
  3.       <el-select v-model="scope.row.type" @change="handleCell(scope.$index, scope.row)">
  4.         <el-option v-for="item in typeList" :key="item.value" :label="item.label" 				 :value="item.value">
  5.         </el-option>
  6.       </el-select>
  7.     </template>
  8.   </el-table-column>

在Vue的的el-table中使用el-select实现数据项的下拉框，并在选中后请求接口，可以使用作用域插槽和事件监听器来实现。

首先，你需要在el-table-column中使用作用域插槽来定义el-select的显示内容和选项。如下所示：

  1. <el-table-column label="Select">
  2.   <template slot-scope="scope">
  3.     <el-select v-model="scope.row.selectedValue" @change="handleSelectChange(scope.row)">
  4.       <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
  5.     </el-select>
  6.   </template>
  7. </el-table-column>

在这个示例中，我们将el-select放置在el-table-column的作用域插槽中，并使用scope.row来访问每个数据项的属性。我们使用v-model来绑定选中的值，并使用@change事件监听器来处理下拉框的选中事件。

接下来，在Vue组件的data中定义options数组来配置el-select的选项。如下所示：

  1. data() {
  2.   return {
  3.     options: [
  4.       { value: 'value1', label: 'Option 1' },
  5.       { value: 'value2', label: 'Option 2' },
  6.       { value: 'value3', label: 'Option 3' },
  7.     ]
  8.   }
  9. }

在这个示例中，我们定义了三个选项，每个选项都有一个value和label属性。

然后，你可以在Vue组件的methods中定义handleSelectChange方法来处理下拉框的选中事件，并在选中后请求接口。如下所示：

  1. methods: {
  2.   handleSelectChange(row) {
  3.     // 在这里发送请求接口的逻辑
  4.     console.log('Selected value:', row.selectedValue);
  5.     // 发送请求接口的示例代码
  6.     ...
  7.   }
  8. }

在handleSelectChange方法中，你可以访问选中的值(row.selectedValue)，并使用相应的逻辑来发送请求接口。你可以使用诸如Axios之类的库发送异步请求，并在接口返回的数据中进行处理。

这样，你就可以在Vue的el-table中使用el-select实现数据项的下拉框，并在选中后请求接口了。当用户选中下拉框的选项时，会触发handleSelectChange方法，并根据需求发送请求接口。

el-table数据项el-switch插槽渲染

  1. <template>
  2.   <div class="t-table" style="width:100%;">
  3.     <t-table :table="table" :columns="table.columns">
  4.       <template #enableStatus="{param}">
  5.         <el-switch
  6.           v-model="param.row.enableStatus"
  7.           :active-value="1"
  8.           :inactive-value="2"
  9.           @change="handleStatusChange(param.row)"
  10.         ></el-switch>
  11.       </template>
  12.     </t-table>
  13.   </div>
  14. </template>
  15. <script>
  16. export default {
  17.   data() {
  18.     return {
  19.       table: {
  20.         data: [
  21.           {
  22.             id: '1',
  23.             date: '2019-09-25',
  24.             name: '张三',
  25.             status: '2',
  26.             enableStatus: 1,
  27.             address: '广东省广州市天河区'
  28.           },
  29.           {
  30.             id: '2',
  31.             date: '2019-09-26',
  32.             name: '张三1',
  33.             status: '1',
  34.             enableStatus: 2,
  35.             address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2'
  36.           },
  37.           {
  38.             id: '3',
  39.             date: '2019-09-27',
  40.             name: '张三2',
  41.             status: '3',
  42.             enableStatus: 1,
  43.             address: '广东省广州市天河区3'
  44.           }
  45.         ],
  46.         columns: [
  47.           { prop: 'name', label: '姓名', minWidth: '100' },
  48.           {
  49.             prop: 'status',
  50.             label: 'render渲染',
  51.             minWidth: '180',
  52.             render: (text, row, index) => {
  53.               // console.log(777, text, row, index)
  54.               let type = ''
  55.               let val = ''
  56.               switch (text) {
  57.                 case '1':
  58.                   type = ''
  59.                   val = '待处理'
  60.                   break
  61.                 case '2':
  62.                   type = 'warning'
  63.                   val = '进行中'
  64.                   break
  65.                 case '3':
  66.                   type = 'success'
  67.                   val = '已完成'
  68.                   break
  69.               }
  70.               return (
  71.                 <el-tag type={type}>
  72.                   {val}
  73.                 </el-tag>
  74.               )
  75.             }
  76.           },
  77.           {
  78.             prop: 'enableStatus',
  79.             label: '插槽渲染',
  80.             minWidth: '180',
  81.             slotName: 'enableStatus'
  82.           },
  83.           { prop: 'address', label: '地址', minWidth: '220' },
  84.           { prop: 'date', label: '日期', minWidth: '180' },
  85.           { prop: 'address', label: '地址', minWidth: '220' }
  86.         ],
  87.       },
  88.     }
  89.   },
  90.   methods: {
  91.     // 状态修改
  92.     handleStatusChange(row) {
  93.       let text = row.status === 1 ? '启用' : '废止'
  94.       this.$confirm(`确认要${text}这条数据吗？`, '警告', {
  95.         confirmButtonText: '确定',
  96.         cancelButtonText: '取消',
  97.         type: 'warning'
  98.       }).then(() => {
  99.         this.$message.success(`点击确定`)
  100.       }).catch(() => {
  101.         console.log('取消')
  102.         row.status = row.status === 1 ? 2 : 1
  103.       })
  104.     },
  105.     // 新增
  106.     add(val) {
  107.       console.log('新增', val)
  108.     },
  109.     // 编辑
  110.     edit(val) {
  111.       console.log('编辑', val)
  112.     },
  113.     // 删除
  114.     handleDelete(val) {
  115.       console.log('删除', val)
  116.     }
  117.   }
  118. }
  119. </script>

三、往期优质相关推荐

VSCode 最全实用插件（VIP典藏版）
Vue超详细整理（VIP典藏版）
Vue中created，mounted，updated详解
一文快速上手Echarts（持续更新）
Vue中el-table数据项扩展各种类型总结（持续更新）

有用请点赞，养成良好习惯！

疑问、交流、鼓励请留言！

欢迎补充！！！

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/426340?site
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号