ElementUI是一款基于Vue.js的开源UI库，提供了丰富的UI组件用于构建Web应用程序。其中，el-table是ElementUI中非常常用的一个组件，用于展示表格数据。el-table提供了多种功能，包括排序、筛选、分页等。本文将重点介绍el-table的多选与单选功能的实现方法。
1. 多选功能的实现
为了实现el-table的多选功能，我们首先需要给每一行的数据添加一个选择框。可以通过使用el-table的`selection`属性来实现这一功能。`selection`属性是一个布尔值，将其设置为true表示显示选择框。
1.1 在el-table中添加选择框
可以在el-table的el-table-column中添加一个`type`属性，并将其值设置为'selection'，以显示选择框。
```html
```
这样，el-table的每一行都会显示一个选择框。
1.2 获取选择的数据
当用户选择了某些行数据后，我们需要获取这些选择的数据。可以通过监听el-table的`selection-change`事件来实现。
```html
```
```javascript
methods: {
handleSelectionChange(selection) {
// selection为用户选择的数据
console.log(selection);
}
}
```
以上代码中，当用户选择了某些行数据后，会触发`handleSelectionChange`方法，并将选择的数据作为参数传入。
1.3 自定义选择框样式
el-table提供了通过设置`selection-config`属性来自定义选择框的样式。可以通过`selection-config`属性中的`selected`来设置选中行的样式，通过`selection-config`属性中的`selected-icon`来设置选中图标的样式。
```html
```
```javascript
data() {
return {
selectionConfig: {
selected: {
color: '#409eff',
background: '#ecf5ff',
},
selectedIcon: 'el-icon-check'
}
}
}
```
以上代码中，`selectionConfig`对象用于设置自定义的选择框样式。其中`selected`属性用于设置选中行的样式，`color`和`background`分别用于设置文字颜色和背景颜色。`selectedIcon`属性用于设置选中图标的样式。
2. 单选功能的实现
要实现el-table的单选功能，我们需要给每一行数据添加一个单选框。可以通过使用el-table的`radio`属性来实现这一功能。`radio`属性是一个布尔值，将其设置为true表示显示单选框。
2.1 在el-table中添加单选框
可以在el-table的el-table-column中添加`type`属性，并将其值设置为'radio'，以显示单选框。
```html
```
这样，el-table的每一行都会显示一个单选框。
2.2 获取选择的数据
当用户选择了某一行数据后，我们需要获取这个选择的数据。可以通过监听el-table的`select`事件来实现。
```html
```
```javascript
methods: {
handleSelect(selection) {
// selection为用户选择的数据
console.log(selection);
}
}
```
以上代码中，当用户选择了某一行数据后，会触发`handleSelect`方法，并将选择的数据作为参数传入。
2.3 自定义单选框样式
el-table提供了通过设置`radio-config`属性来自定义单选框的样式。可以通过`radio-config`属性中的`selected`来设置选中行的样式，通过`radio-config`属性中的`selected-icon`来设置选中图标的样式。
```html
```
```javascript
data() {
return {
radioConfig: {
selected: {
color: '#409eff',
background: '#ecf5ff',
},
selectedIcon: 'el-icon-check'
}
}
}
```
以上代码中，`radioConfig`对象用于设置自定义的单选框样式。其中`selected`属性用于设置选中行的样式，`color`和`background`分别用于设置文字颜色和背景颜色。`selectedIcon`属性用于设置选中图标的样式。
总结
通过以上的介绍，我们可以看到el-table的多选与单选功能的实现步骤。通过设置`selection`属性实现多选功能，通过设置`radio`属性实现单选功能。同时，我们还可以通过自定义样式的方式，设置选择框的外观。
ElementUI中的el-table是一个非常强大和灵活的表格组件，提供了丰富的功能，包括多选和单选。通过合理的使用el-table，我们可以轻松实现复杂的表格需求，为用户提供更好的交互体验。
参考链接：