表格每行实现单选

<template>
  <div class="isShowSelectScene" style="width: 100%;height: 100%;">
    <a-table
      v-if="ishowTable"
      :columns="sceneColumns"
      :data-source="sceneData"
      :rowKey="(record) => record.sceneId"
      bordered
      :row-selection="rowSelection"
    >
      <!--场景类别-->
      <template #type="{ record }">
        <span v-if="record.type == 1">设备级</span>
        <span v-else-if="record.type == 2">
          系统级
        </span>
        <span v-else>
          分系统级
        </span>
      </template>
      <!--场景内容-->
      <template #sceneContent="{ record }">
           <span
             style="display: inline-block;width: 140px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
                    {{record.sceneContent}}
           </span>
      </template>
    </a-table>
  </div>
</template>


<script setup>
  import {computed, defineEmits, defineExpose, defineProps, onMounted, ref} from 'vue';
  import {getSceneListApi} from "../../../../../../common/api/scene/sceneApi.js"
  // 接收父组件传递的方法
  let myEmit = defineEmits(['changeSelectSonSceneId'])
  let isShowSelectScene = ref(true)


  const sceneColumns = [
    {
      title: '场景名称',
      dataIndex: 'sceneName',
      key: 'sceneName',
      // width:'20%',
      // slots: {
      //   title: 'customTitle',
      //   customRender: 'name',
      // },
    },
    {
      title: '场景类别',
      dataIndex: 'type',
      key: 'type',
      slots: {customRender: 'type'},
      // width:'10%',
    },
    {
      title: '场景内容',
      key: 'sceneContent',
      dataIndex: 'sceneContent',
      width: '20%',
      slots: {customRender: 'sceneContent'},
    },
    {
      title: '创建人',
      dataIndex: 'createUserName',
      key: 'createUserName',
      // width:'10%',
    },
    {
      title: '创建时间',
      key: 'createTime',
      dataIndex: 'createTime',
      // width:'20%',
    }
  ]

  let sceneData = ref([])

  let dataListSelectionKeys = ref([])
  let selectOnSelectChange = (selectedRowKeys, selectedRows) => {
    myEmit('changeSelectSonSceneId', selectedRowKeys)
    // props.currentSelectSonSceneId = selectedRowKeys
    // console.log(props.currentSelectSonSceneId)
  }

  onMounted(() => {
    let apiData = {
      treeType: '0',
      type:'3'
    }
    getSceneList(apiData)
  })

  let getSceneList = (apiData) => {
    apiData.treeType = apiData.treeType === '0' ? '' : apiData.treeType
    getSceneListApi(apiData).then(res => {
      sceneData.value = res.data
    })
  }

  // 编辑调用
  let toFatherMethod = (record) => {

  }
  // 暴露给父组件的值
  defineExpose({isShowSelectScene, toFatherMethod})
  // 暴露给父组件的方法

  // 接收父组件的值
  let props = defineProps(
    {
      selectDeptData: {
        type: Object,
        default: () => {
        }
      },
      ishowTable:{
        type:Boolean,
        default:()=>true
      },
      nowSelectLevel: {
        type: String,
        default: () => ""
      },
      currentSelectSonSceneId: {
        type: Array,
        default: () => []
      },
      defaultChecked: {
        type: String,
        default: () => ''
      }

    }
  )
  // 接收父组件传递的方法
  // let myEmit = defineEmits(['getSceneList'])

  let submitSceneInfo = () => {

  }



  const rowSelection = computed(() => {
    return {
      type: 'radio', // 是否为单选
      // 设置了这个属性便无法选中
      // selectedRowKeys: dataListSelectionKeys,
      onChange: (selectedRowKeys, selectedRows, event) => {
        //selectedRowKeys 为你点击选框时这一页选中的所有key
        //selectedRows 为你点击选框时这一页选中的所有数据
        myEmit('changeSelectSonSceneId', selectedRowKeys)
        // props.currentSelectSonSceneId = selectedRowKeys
        // 是个数组
      },
      onSelect: (record, selected, selectedRows, nativeEvent) => {
        //record 点击某一条的所有数据
        //selected 点击的一条是否被选中
      },
      onSelectAll: (selected, selectedRows, changeRows) => {
        //selected 点击全选是否选中
        //selectedRows 点击全选判断所有的选中数据
        //changeRows 所有改变选中状态的数据
      },
      getCheckboxProps: record => {
        console.log(props)
        return {
          // 全部默认禁止选中
          disabled: props.defaultChecked ? true : false,
          // 某几项默认禁止选中(R: 当state等于1时)
          // disabled: record.state == 1,
          // 某几项默认选中(R: 当state等于1时)
          defaultChecked: record.sceneId === props.defaultChecked
        }
      }
    }
  })


</script>

<style lang="less">
  .addSceneModal {

  }

</style>