el-redio置灰并且自动被选中

Question

问一下各位VUE的方法，现在的效果执行到了这行禁止选并且变灰，但是目前想要一个效果就是置灰这行前面的redio还要自动被选中，怎么处理一下呢

<!--
  * @Description: 人员查询
  * @Author: feng.li
  * @Date: 2022-12-12 11:14:28
-->
<template>
  <el-table
    highlight-current-row
    :data="personList"
    detail
    height="100%"
    :row-style="{ cursor: 'pointer' }"
    :row-class-name="tableRowClassName"
    @current-change="handleCurrentChange">
    <el-table-column width="45">
      <template #default="{ $index, row}">
        <el-tooltip :disabled="row.userId" placement="top" effect="light">
          <div slot="content">当前人员未设置账号信息，无法进行审批，<br/>请在系统-用户管理中完善账号信息</div>
          <el-radio v-model="selectedId" :value="row.userId" :disabled="!row.userId||!checkSelectable(row)"  :label="row.id||chooseAndDis" @change.native="handleChangeRadioValue($index, row)">{{ '' }}</el-radio>
        </el-tooltip>
      </template>
    </el-table-column>
    <el-table-column type="index" width="50" label="序号" align="center"></el-table-column>
    <el-table-column prop="personName" min-width="104" label="姓名" align="center"></el-table-column>
    <el-table-column prop="jobName" min-width="146" label="职务" align="center"></el-table-column>
    <el-table-column prop="telephone" min-width="146" show-overflow-tooltip label="联系电话" align="center"></el-table-column>
    <el-table-column prop="resumeStatus" min-width="146" show-overflow-tooltip label="在职状态" align="center">
      <template #default="{ row }">
        <div>{{ row.resumeStatus === '1' ? '现任' : '离任' }}</div>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>

export default {
  name: 'PersonTable',
  components: {},
  props: {
    personList: {
      type: Array,
      default: () => []
    },
    selectedInfo: {
      type: Object,
      default: () => {}
    },
    otherData: {
      type: String,
      default: () => {}
    }
  },
  data () {
    return {
      selectedId: '',
      selectedPersonInfo: {},
      otherSelectedId:'',
      otherIsDisabled:false,
      chooseAndDis:''
    }
  },
  computed: {},
  watch: {
    selectedInfo: {
      handler (newVal) {
       const { userId } = newVal
       this.selectedId = userId
      },
      immediate: true,
      deep: true
    },
    otherData: {
      handler (newVal) {
        var userId  = newVal
        console.log("666"+newVal)
        for (let i = 0; i < this.personList.length; i++) {
          if (userId === this.personList[i].userId) {
            console.log('Find the personn:', this.personList[i]);
            this.otherSelectedId=userId
            console.log("this.selectId::"+this.otherSelectedId)
          }
        }
      },
      immediate: true,
      deep: true
    }
  },
  created () {
  },
  mounted () {},
  methods: {
    tableRowClassName ({row, rowIndex}) {
      if (row.userId===this.otherSelectedId) {
        return 'disabledRow'
      } else {
        return ''
      }
    },
    checkSelectable (row) {
      return row.userId
    },
    handleCurrentChange (val) {
      if (!val) return
      if (!val.userId) return
      this.selectedPersonInfo = { ...val }
      this.selectedId = this.selectedPersonInfo?.id
      this.$emit('selectedPerson', this.selectedPersonInfo)
    },
    // 控制当前选中数据
    handleChangeRadioValue (index, row) {
      this.selectedPersonInfo = { ...row }
      this.$emit('selectedPerson', this.selectedPersonInfo)
    },

    clearSelectedId () {
      this.selectedId = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.el-table {
  border-left: 1px solid #F2F2F2;
  border-right: 1px solid #F2F2F2;
  /deep/ .disabledRow{
    cursor: not-allowed;
    pointer-events: none;
    color: #ccc; // 这个会更改当前行的字体颜色，如果不需要可以删掉
  }
}

</style>

Answer 1

【以下回答由 GPT 生成】

解决方案

要在Vue中实现在当前表格行置灰并自动选中相应的radio的效果，可以遵循以下步骤：

1. 首先，确保你在Vue项目中使用了element-ui，这样你才能使用el-table和el-radio组件。

2. 在Vue的data选项中定义一个变量，用于保存当前选中的行的索引值，例如selectedRowIndex。

3. 对于每一行的元素，使用Vue的v-bind指令，将class属性绑定到一个计算属性上。这个计算属性将根据当前行的索引和selectedRowIndex的值来返回相应的class值。可以使用三元表达式来判断是否应该给当前行添加置灰的class。

   ```html <el-table :data="tableData" ...其他属性

   ...

   ```

4. 在Vue的methods定义一个方法，用于处理el-radio的change事件。这个方法将更新selectedRowIndex的值为当前行的索引值。

   javascript methods: { handleChange(index) { this.selectedRowIndex = index; } }

5. 最后，定义一个计算属性，用于判断当前行是否被选中，并返回相应的class。

   javascript computed: { // 根据当前行的索引和selectedRowIndex的值来判断是否选中 getRowClass() { return (index) => { return index === this.selectedRowIndex ? 'grayed-row' : ''; }; } }

6. 在Vue的style选项中定义一个CSS类grayed-row，用于设置表格行置灰的样式。

   css <style> .grayed-row { background-color: #f0f0f0; } </style>

这样，当用户选择某一行的el-radio时，该行将被置灰，并且selectedRowIndex的值将更新为当前行的索引值。同时，getRowClass计算属性会根据selectedRowIndex的值返回相应的class，从而实现选中行的置灰效果。

请注意，以上代码只是一个示例，你需要根据实际情况进行适当的修改和调整。

希望以上解决方案对你有所帮助。如果你有任何疑问，请随时提问。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^