element表格实现单选_整行选中,居中报错解决方法
查看element官方文档,文档上只是配置了多选的方法,并没有单选。所以文档上的多选功能并不能满足咱们的单选需求,所以需要进行修改。
先上一下实现效果:
代码实现:
html:
<el-table
v-loading="loading"
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
//此处为我定义的居中方法,直接设置样式会有报错所以需要定义方法return出来(此处因为我多处表格需要居中,所以就封装了全局使用方法,下方会贴出)
:header-cell-style="GLOBAL.cellStyleFun"
:cellStyle="GLOBAL.cellStyleFun"
//此处为表格自带方法,点击一整行时触发,也是实现点击整行都选择的重要方法
@row-click="getCurrentRow"
>
<el-table-column min-width="3%">
<template slot-scope="scope">
<el-radio
:label="scope.row.id"
v-model="radio"
//此处为element单选框自带状态改变方法(注意:此处方法名和上方表格整行触发方法名一样)
@change.native="getCurrentRow(scope.row)"
>
<span style="opacity: 0;">.</span>
</el-radio>
</template>
</el-table-column>
</el-table>
js:
data() {
return {
radio: "",
multipleSelection: null,
};
},
methods: {
//获取选中数据,element实现单选
getCurrentRow(row) {
//console.log(row);此处为一整行的数据
this.multipleSelection = row;
this.radio = row.id //此处赋值唯一键id 与单选组件label对应,实现单选样式显示
},
}
自此你就实现了element表格单选功能了,如果你就想点击按钮实现单选 你就表格那个整行点击事件去掉就是了。
下面附上:居中方法函数
创建js文件:
const cellStyleFun = () => {
return 'text-align:center'
}
export default {
cellStyleFun,
}
main.js中引入:
//引入自定义的全局方法
import globalvar from '@/assets/libs/global_variable'
Vue.prototype.GLOBAL = globalvar;