【Vue】中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中定义的方法来处理数据项的值。
下面是一个示例代码：
{{ formatId(scope.row.id) }}
在上面的代码中，我们定义了一个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数据项动态加不同颜色圆点
{{ paramFormat(scope.row.status) }}
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：
{{ tag.name }}
在上面的例子中，我们使用了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 函数（传值：当前值、整行数据、第几行）
二、其他插槽类型处理
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-upload 组件来实现文件上传功能。在上传按钮的点击事件中，可以通过 scope.row 获取当前行的数据项信息，并执行相应的上传逻辑：
上传文件
在 Vue 组件的 methods 中定义上传文件的各个回调函数，进行相关的数据处理和反馈：
methods: {
uploadBiu(file) {
// 上传处理逻辑
},
}
当用户点击上传文件按钮时，el-upload 组件将触发相应的事件，并将文件信息传递给回调函数，你可以在回调函数中进行相应的处理，例如发送请求上传文件、更新表格数据等。
那多个按钮呢, 传参插槽v-for即可 或者直接加
el-table数据项过长截取并且悬浮显示所有文字
vue中使用table展示列表信息时，如果信息太长展示会很丑不美观，而且悬浮框拷贝不太友好
{{ scope.row.measures }}
{{scope.row.companyName}}
{{scope.row.companyName.substr(0, 20) + "..."}}
由于会对结果进行判断.length()和处理subdtr(), 数据获取不及时, 会导致报错, 所以需要加个v-if 请求接口数据获取完毕后再进行处理
el-table数据项el-link链接跳转
要在VueVue的el-table中使用el-link实现数据项的链接跳转，你可以使用作用域插槽和事件监听器来实现。
首先，你需要在el-table-column中使用作用域插槽来定义el-link的显示内容和点击事件。如下所示：
{{ scope.row.linkText }}
在这个示例中，我们将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-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插槽渲染
三、往期优质相关推荐
| VSCode 最全实用插件（VIP典藏版） |
| Vue超详细整理（VIP典藏版） |
| Vue中created，mounted，updated详解 |
| 一文快速上手Echarts（持续更新） |
| Vue中el-table数据项扩展各种类型总结（持续更新） |
有用请点赞，养成良好习惯！
疑问、交流、鼓励请留言！
欢迎补充！！！