element-ui table自定义模版 radio单选框

Question

<el-table :data="pointPriceTableData" border style="width: 100%">
                        <el-table-column type="index" label='序号' width='136'>
                        </el-table-column>
                        <el-table-column label="选中" width="136">
                            <template scope="scope">
                                  <el-radio class="radio" v-model="radio" label="scope.row.radio"></el-radio>
                            </template>
                        </el-table-column>
</el-table>

export default {

    data() {
            return {
                radio: '',
                    }
              }
}

data数据对应的radio未赋值上
以上页面显示radio的value 为"scope.row.radio"了，label的值没赋值上，label值如何赋值？求大神指点

Answer 1

<el-radio class="radio" v-model="radio" :label="scope.row.radio"></el-radio>

label前面加个:。

Answer 2

<template>
<div>

<el-table v-loading="loading" element-loading-text="正在加载......"
          :data="getDataList"
          @row-click="rowClick"
          style="width: 100%">
  <el-table-column width="80">
    <template slot-scope="props">
        <span class="tran_box">
           <el-checkbox v-model="props.row.selected"></el-checkbox>
        </span>
    </template>
  </el-table-column>
  <el-table-column
    prop="id"
    label="编号" width="180">
  </el-table-column>
  <el-table-column
    prop="name"
    label="姓名">
  </el-table-column>
</el-table>

</div>
</template>
<script>

export default{

data: function () {
  return {
    dataList: [
      {id: 1, name: 'name1', selected: false},
      {id: 2, name: 'name2', selected: false},
      {id: 3, name: 'name3', selected: false},
      {id: 4, name: 'name4', selected: false},
      {id: 5, name: 'name5', selected: false},
    ],
    currentId: null
  }
},
computed: {
  getDataList(){
    const that = this;
    if (!that.currentId.id) {
      that.dataList.map(item => {
        item.selected = false;
      });
      return that.dataList;
    }
    that.dataList.map(item => {
      item.selected = item.id === that.currentId.id;
    });
    return that.dataList;
  }
},
created: function () {

},
methods: {
  rowClick(row, column, cell, event){
    this.currentId = row.id;
  }
},
components: {}

}
</script>
<style>
.tran_box .el-checkbox__inner {

border-radius: 9px;

}
</style>

Answer 3

你的pointPriceTableData数据需要有radio属性以及值，这样就没有问题了。
就是这样的

pointPriceTableData: [
    {
        radio: '1'
    },
    {
        radio: '2'
    },
    {
        radio: '3'
    },
    {
        radio: '4'
    },
]

Answer 4

<template>
 <el-table
        ref="singleTable"
        :data="tableData"
        highlight-current-row
        @current-change="handleCurrentChange"
        @row-click = "showRow"
        style="width:100%"
        :span-method="objectSpanMethod"
        border>
          <el-table-column
            prop="ability"
            label="生活能力"
            width="180">
          </el-table-column>
          <el-table-column
            prop="state"
            label="依赖状态"
            width="120">

          </el-table-column>
          <el-table-column label="选择" width="70" center>
            <template scope="scope">
              <el-radio class="radio" v-model="radio"  :label="scope.$index"  @change.native="getCurrentRow(scope.$index)" >&nbsp;</el-radio>
            </template>
          </el-table-column>
        </el-table>
        
</template>
<script>
  import ElMain from "../../../node_modules/element-ui/packages/main/src/main";
  export default {
    components: {ElMain},
    data() {
      return {
        tableData:[
          {ability:"进食",state:"依赖他人",index:1},
          {ability:"进食",state:"需要帮助",index:2},
          {ability:"进食",state:"独立完成",index:3},
          {ability:"床-椅双向转移",state:"依赖他人",index:4},
          {ability:"床-椅双向转移",state:"需要大量帮助",index:5},
          {ability:"床-椅双向转移",state:"需要少量帮助",index:6},
        ],
      };
    },
    methods: {
      showRow(row){
        //赋值给radio
        this.radio = this.tableData.indexOf(row);
      },
      handleCurrentChange(val,index){
        this.currentRow = val;
        this.$emit('data',val.pkg);
      },
      getCurrentRow(val){
        console.log(val)
      },
      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
          if (rowIndex % 3 === 0) {
            return {
              rowspan: 3,
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      }
    },
    computed: {

    },
  };
</script>