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

分手后的思念是犯贱 2024-03-17 18:35 3阅读 0赞

**目录**

前言

一、普通数据处理

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中定义的方法来处理数据项的值。

下面是一个示例代码：

<template>
      <el-table :data="tableData">
        <el-table-column label="ID" prop="id">
          <template slot-scope="scope">
            {
       { formatId(scope.row.id) }}
          </template>
        </el-table-column>
        <el-table-column label="Name" prop="name"></el-table-column>
      </el-table>
    </template>
    
    <script>
    export default {
      data() {
        return {
          tableData: [
            { id: 1, name: 'John' },
            { id: 2, name: 'Jane' },
          ],
        };
      },
      methods: {
        formatId(id) {
          // 在这里可以对id进行处理
          return '#' + id;
        },
      },
    };
    </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数据项动态加不同颜色圆点 ###

<el-table-column prop="status" label="数据状态" header-align="center" width="200">
    <template slot-scope="scope">
      <div style="display: flex; justify-content: center; align-items: center;">
    	<span slot="reference" style=" margin-right: 8px;">
    	  <i class="dotClass" :style="getColor(scope.row.status)"></i>
    	</span>
    	{
       { paramFormat(scope.row.status) }}
      </div>
    </template>
    </el-table-column>
    
    
    getColor(data) {
      if (data == "one") {
    	return "#67C23A";
      } else if (data == "two") {
    	return "#F56C6C";
      }
    	...
    },
    
    
    
    .dotClass {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      display: block;
    }

![f30a03ef61c7485b9ef3289c832dddca.png][]

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

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

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

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

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

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

data() {
      return {
        tableData: [
          {
            name: '张三',
            tags: [{ name: '标签1', type: 'success' }, { name: '标签2', type: 'warning' }]
          },
          {
            name: '李四',
            tags: [{ name: '标签3', type: 'info' }, { name: '标签4', type: 'danger' }]
          }
        ]
      };
    }

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

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

**组件化代码举例**

![78619799e8db44eea5553715f0f7d7a5.png][]

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

<template>
      <div class="t-table" style="width:100%;">
        <t-table :table="table" :columns="table.columns" />
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          table: {
            data: [
              {
                id: '1',
                date: '2019-09-25',
                name: '张三',
                status: '2',
                address: '广东省广州市天河区'
              },
              {
                id: '2',
                date: '2019-09-26',
                name: '张三1',
                status: '1',
                address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2'
              },
              {
                id: '3',
                date: '2019-09-27',
                name: '张三2',
                status: '3',
                address: '广东省广州市天河区3'
              }
            ],
            columns: [
              { prop: 'name', label: '姓名', minWidth: '100' },
              {
                prop: 'status',
                label: 'render渲染1',
                minWidth: '180',
                render: (text, row, index) => {
                  // console.log(777, text, row, index)
                  let type = ''
                  let val = ''
                  switch (text) {
                    case '1':
                      type = ''
                      val = '待处理'
                      break
                    case '2':
                      type = 'warning'
                      val = '进行中'
                      break
                    case '3':
                      type = 'success'
                      val = '已完成'
                      break
                  }
                  return (
                    <el-tag type={type}>
                      {val}
                    </el-tag>
                  )
                }
              },
              {
                prop: 'status',
                label: 'render渲染2',
                minWidth: '180',
                render: (text, record) => {
                  return (
                    <el-switch
                      active-value={'1'}
                      inactive-value={'2'}
                      v-model={record.enableStatus}
                      onChange={() => this.handleStatusChange(record)}
                    >
                      {text}
                    </el-switch>
                  )
                },
              },
              { prop: 'address', label: '地址', minWidth: '220' },
              { prop: 'date', label: '日期', minWidth: '180' },
              { prop: 'address', label: '地址', minWidth: '220' }
            ],
          },
        }
      },
      methods: {
        // 状态修改
        handleStatusChange(row) {
          let text = row.status === '1' ? '启用' : '废止'
          this.$confirm(`确认要${text}这条数据吗？`, '警告', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$message.success(`点击确定`)
          }).catch(() => {
            console.log('取消')
            row.status = row.status === '1' ? '2' : '1'
          })
        },
        // 新增
        add(val) {
          console.log('新增', val)
        },
        // 编辑
        edit(val) {
          console.log('编辑', val)
        },
        // 删除
        handleDelete(val) {
          console.log('删除', val)
        }
      }
    }
    </script>

## 二、其他插槽类型处理 ##

### el-table数据项加入输入框 ###

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

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

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

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

接下来，定义表格数据：

data() {
      return {
        tableData: [
          {
            name: '张三',
            input: ''
          },
          {
            name: '李四',
            input: ''
          }
        ]
      };
    }

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

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

### el-table数据项上传按钮 ###

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

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

<el-table v-bind:data="tableData">
      <el-table-column>
        <template slot-scope="scope">
          
        </template>
      </el-table-column>
      
    </el-table>

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

<el-table v-bind:data="tableData">
      <el-table-column>
        <template slot-scope="scope">
          
    		<el-upload
    		  action
    		  v-if="true"
    		  :show-file-list="false"
    		  :auto-upload="false"
    		  :on-change="(file, fileList) => uploadBiu(scope.row, file, fileList)"
    		>
            <el-button size="small" type="text" icon="el-icon-upload">
              上传文件
            </el-button>
          </el-upload>
        </template>
      </el-table-column>
      
    </el-table>

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

methods: {
      uploadBiu(file) {
        // 上传处理逻辑
      },
    }

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

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

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

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

<el-table-column prop="measures" label="companyName">
            <template slot-scope="scope">
              <el-popover
                        placement="top"
                        width="300"
                        trigger="hover"
                        :disabled="scope.row.companyName&& scope.row.companyName.length <= 20"
                >
                    <div>{
       { scope.row.measures }}</div>
                    <span slot="reference" v-if="scope.row.companyName&& scope.row.companyName.length <= 20">{
       {scope.row.companyName}}</span>
                    <span slot="reference" v-if="scope.row.companyName&& scope.row.companyName.length > 20">{
       {scope.row.companyName.substr(0, 20) + "..."}}</span>
              </el-popover>
            </template>
          </el-table-column>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

data() {
      return {
        options: [
          { value: 'value1', label: 'Option 1' },
          { value: 'value2', label: 'Option 2' },
          { value: 'value3', label: 'Option 3' },
        ]
      }
    }

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

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

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

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

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

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

![19e321600dd04130a006efb976419311.png][]

<template>
      <div class="t-table" style="width:100%;">
        <t-table :table="table" :columns="table.columns">
          <template #enableStatus="{param}">
            <el-switch
              v-model="param.row.enableStatus"
              :active-value="1"
              :inactive-value="2"
              @change="handleStatusChange(param.row)"
            ></el-switch>
          </template>
        </t-table>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          table: {
            data: [
              {
                id: '1',
                date: '2019-09-25',
                name: '张三',
                status: '2',
                enableStatus: 1,
                address: '广东省广州市天河区'
              },
              {
                id: '2',
                date: '2019-09-26',
                name: '张三1',
                status: '1',
                enableStatus: 2,
                address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2'
              },
              {
                id: '3',
                date: '2019-09-27',
                name: '张三2',
                status: '3',
                enableStatus: 1,
                address: '广东省广州市天河区3'
              }
            ],
            columns: [
              { prop: 'name', label: '姓名', minWidth: '100' },
              {
                prop: 'status',
                label: 'render渲染',
                minWidth: '180',
                render: (text, row, index) => {
                  // console.log(777, text, row, index)
                  let type = ''
                  let val = ''
                  switch (text) {
                    case '1':
                      type = ''
                      val = '待处理'
                      break
                    case '2':
                      type = 'warning'
                      val = '进行中'
                      break
                    case '3':
                      type = 'success'
                      val = '已完成'
                      break
                  }
                  return (
                    <el-tag type={type}>
                      {val}
                    </el-tag>
                  )
                }
              },
              {
                prop: 'enableStatus',
                label: '插槽渲染',
                minWidth: '180',
                slotName: 'enableStatus'
              },
              { prop: 'address', label: '地址', minWidth: '220' },
              { prop: 'date', label: '日期', minWidth: '180' },
              { prop: 'address', label: '地址', minWidth: '220' }
            ],
          },
        }
      },
      methods: {
        // 状态修改
        handleStatusChange(row) {
          let text = row.status === 1 ? '启用' : '废止'
          this.$confirm(`确认要${text}这条数据吗？`, '警告', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$message.success(`点击确定`)
          }).catch(() => {
            console.log('取消')
            row.status = row.status === 1 ? 2 : 1
          })
        },
        // 新增
        add(val) {
          console.log('新增', val)
        },
        // 编辑
        edit(val) {
          console.log('编辑', val)
        },
        // 删除
        handleDelete(val) {
          console.log('删除', val)
        }
      }
    }
    </script>

## 三、往期优质相关推荐 ##

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td><strong><strong><a href="https://libusi.blog.csdn.net/article/details/124309613" title="VSCode 最全实用插件（VIP典藏版）" rel="nofollow">VSCode 最全实用插件（VIP典藏版）</a></strong></strong></td> 
  </tr> 
  <tr> 
   <td><strong><strong><a href="https://libusi.blog.csdn.net/article/details/103893391" title="Vue超详细整理（VIP典藏版）" rel="nofollow">Vue超详细整理（VIP典藏版）</a></strong></strong></td> 
  </tr> 
  <tr> 
   <td><strong><strong><a href="https://blog.csdn.net/libusi001/article/details/127354508" title="Vue中created，mounted，updated详解" rel="nofollow">Vue中created，mounted，updated详解</a></strong></strong></td> 
  </tr> 
  <tr> 
   <td><strong><strong><a href="https://libusi.blog.csdn.net/article/details/127585267" title="一文快速上手Echarts（持续更新）" rel="nofollow">一文快速上手Echarts（持续更新）</a></strong></strong></td> 
  </tr> 
  <tr> 
   <td><strong><strong><a href="https://blog.csdn.net/libusi001/article/details/131668481" title="Vue中el-table数据项扩展各种类型总结（持续更新）" rel="nofollow">Vue中el-table数据项扩展各种类型总结（持续更新）</a></strong></strong></td> 
  </tr> 
 </tbody> 
</table>

--------------------

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

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

**欢迎补充！！！**

[f30a03ef61c7485b9ef3289c832dddca.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/2adae274f5ec488a9f63706e6d643260.png
[78619799e8db44eea5553715f0f7d7a5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/911652c55cfe4f658a04091c912841f9.png
[19e321600dd04130a006efb976419311.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/6d56f0b2f96e4ae6bdef270b00b4c463.png