element-ui 的 单选按钮(Radio) 怎么取消文本显示?

因为要控制 el-radioel-table 单选的联动性,el-radiolable 属性绑定的是 行数据ID, 但不想把ID显示出来

图片描述

html

<el-table :data="tableData" highlight-current-row @current-change="tableChange">
    <el-table-column>
      <template slot-scope="scope" >
        <el-radio v-model="radio" :label="scope.row.ID" @change="radioChange"></el-radio>
      </template>
    </el-table-column>
    <el-table-column v-for="(value, field) in tableColumn" :key="field" :property="field" :label="value" width="auto"></el-table-column>
</el-table>

data

     radio: "",  // 单选按钮绑定值
      selectRowData: "",
      tableColumn: {
        date: "日期",
        name: "姓名",
        address: "地址"
      },
      tableData: [  // 表数据
        {
          ID: 1,
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          ID: 2,
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          ID: 3,
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          ID: 4,
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄"
        }
      ]

methods

    tableChange(newCurrentRow) {
      // 表格单选改变
      this.selectRowData = newCurrentRow; // 保存当前选中数据
      this.radio = newCurrentRow.ID; // 控制单选框选中
    },
    radioChange() {
      // 单选按钮值改变
      // 控制表格单选行选中, 与表格单选联动
      // 这里忽略,点击单选按钮 会触发表格的单选
    },
阅读 9.5k
2 个回答

自己找到方法了,原来很简单, 直接加一个 &nbsp; 就行了 /手动笑哭

<el-radio v-model="radio" :label="scope.row.ID" @change="radioChange">&nbsp;</el-radio>
新手上路,请多包涵
<el-radio v-model="radio" :label="scope.row.ID" @change="radioChange">{{&nbsp;}}</el-radio>

这样就可以了,我的是2.13.2版本

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题