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;