element表格实现单选_整行选中,居中报错解决方法

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;
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值