el-table
中单选样式不太明显,所以改了个多选框样式的单选功能。
代码如下:
<template>
<el-table
ref="elTable"
v-bind="$attrs"
class="custom-table"
:class="{'custom-table-radio': type == 'radio', 'is-row-click': isRowClick}"
v-on="{...$listeners, 'selection-change': () => {}, 'row-click': ()=>{}}"
@selection-change="handleSelectionChange"
@row-click="setCurrent"
>
<el-table-column
v-if="type == 'radio' || type == 'checkbox'"
type="selection"
column-key="index"
width="50"
/>
<slot />
</el-table>
</template>
<script>
export default {
name: 'CheckboxTable',
props: {
type: {
type: String, // checkbox or radio
default: 'none'
},
isRowClick: { // 是否点击一行勾选
type: Boolean,
default: true
}
},
methods: {
toggleRowExpansion(a, b) {
this.$refs.elTable.toggleRowExpansion(a, b)
},
clearSelection() {
this.$refs.elTable.clearSelection()
},
toggleRowSelection(data, selected) {
this.$refs.elTable.toggleRowSelection(data, selected)
},
setCurrentRow(row) {
this.$refs.elTable.setCurrentRow(row)
},
// setCurrent(row, event, column) {//2.4.11写法
setCurrent(row, column, event) { // 2.8.2写法
if (this.isRowClick) {
if (this.type === 'radio' || this.type === 'checkbox') {
this.$refs.elTable.toggleRowSelection(
row
// this.data[event.currentTarget.rowIndex]
)
}
}
this.$emit('row-click', row, event, column)
},
handleSelectionChange(selection) {
if (this.type === 'radio' && selection.length > 1) {
this.$refs.elTable.toggleRowSelection(selection[0])
return
}
this.$emit('selection-change', selection)
}
}
}
</script>
// element-ui.scss
.custom-table.is-row-click td.el-table-column--selection .cell::after {
content: " ";
cursor: pointer;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 10;
}
.custom-table-radio th.el-table-column--selection .el-checkbox {
display: none;
}
main.js中注册
Vue.component('checkbox-table', () => import('@/components/CheckboxTable')) // checkbox-table