表格可单选根据后端返回的数据禁用某项数据（vue3.0+ts+antdesginVue）

造梦者FZ

于 2021-08-26 15:56:35 发布

阅读量481

点赞数

分类专栏： vue 文章标签： vue.js html5 javascript

本文链接：https://blog.csdn.net/qq_43923146/article/details/119933327

版权

vue 专栏收录该内容

80 篇文章 5 订阅

订阅专栏

表格可单选根据后端返回的数据禁用某项数据（vue3.0+ts+antdesginVue）

在这里插入图片描述

<a-table
 	bordered
   :rowSelection="rowSelection"
   :columns="columns"
   :data-source="tableData"
   :pagination="false"
   :scroll="{ y:'300px'}"
   size="small" 
   rowKey="id"
   v-model:checkedKeys="selectedRowKeysArray"
 > 
   <template #gender="{ record }">
     <span>{{record.gender=='0'?'男':'女'}}</span>
   </template>
 </a-table>

<script lang="ts">
import { defineComponent, reactive, UnwrapRef, toRefs, ref,computed, onMounted,unref} from 'vue';
	setup() {
		
	    const selectedRowKeysArray = ref([])
	 	const userId = ref<string>('')

		 const rowSelection=computed(()=>{
	      return{
	        type:'radio', //设置成单选按钮
	        selectedRowKeys:selectedRowKeysArray,
	        onChange(selectedRowKeys, selectedRows){
	          selectedRowKeysArray.value = selectedRowKeys
	          userId.value = selectedRows[0].id
	        },
	        getCheckboxProps: (record) => ({
	          disabled: record.expertsId
	        })
	      }
	    })
		 return {
		 	rowSelection，
		 	selectedRowKeysArray，
		 	userId，
		}
	}
</script>