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

慕白Lee

已于 2023-12-08 16:06:04 修改

阅读量6.4k

点赞数 41

分类专栏： # Vue 文章标签： vue.js javascript 前端

于 2023-07-11 20:24:31 首次发布

本文链接：https://blog.csdn.net/libusi001/article/details/131668481

版权

Vue 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了如何在Vue项目中使用ElementUI的el-table组件进行数据处理，包括调用方法处理值、动态添加颜色圆点、插入el-tag、使用输入框、按钮、链接跳转、下拉框和开关等。通过自定义列模板和插槽，实现el-table数据项的多样化展示和交互功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;
}

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

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

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

<template>
  <el-table :data="tableData">
    <el-table-column label="姓名" prop="name"></el-table-column>
    <el-table-column label="标签" prop="tags">
      <template slot-scope="scope">
        <el-tag v-for="tag in scope.row.tags" :key="tag" :type="tag.type">{{ tag.name }}</el-tag>
      </template>
    </el-table-column>
  </el-table>
</template>

在上面的例子中，我们使用了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了，每个人的标签会根据不同的类型显示不同的样式。

组件化代码举例

需配置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-column fixed="right" label="操作" width="100">
    <template slot-scope="scope">
      <el-button type="text" size="mini" :disabled="disFlag" @click="balabala(scope.row)">编辑</el-button>
    </template>
    <template slot-scope="scope">
      <el-button type="text" size="mini" @click="bala(scope.row)">详情</el-button>
    </template>
  </el-table-column>

    //balabala
    balabala(row) {
      this.$router.push(
        "/bala/gaga/detail?
        id=" + row.id +
        "&name=" + row.name
      );
    },

    //bala
    bala: function (row) {
      this.$router.push({
        path: "/bala/neinei/detail",
        query: {
          id: row.id,
          name: row.name,
          type: row.type,
        },
      });
    },

el-table数据项加入输入框

简单举例

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

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

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

<template>
  <el-table :data="tableData">
    <el-table-column label="姓名" prop="name"></el-table-column>
    <el-table-column label="标签">
      <template slot-scope="scope">
        <el-input v-model="scope.row.input" placeholder="请输入标签"></el-input>
      </template>
    </el-table-column>
  </el-table>
</template>

在上面的例子中，我们使用了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">
      <!-- 显示上传文件按钮, :auto-upload="false"不然会上传两次 -->
		<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下拉框，选中后请求接口

简单举例

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

在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插槽渲染

<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>