vue-ant table使用radio/checkbox切换
ant官网文档链接选中 table 表格,进入表格内部,点击可以查看该表格需要定义的属性<a-tableref="table"size="middle"borderedrowKey="id":columns="columns"...
·
- 选中 table 表格,进入表格内部,点击可以查看该表格需要定义的属性
<a-table
ref="table"
size="middle"
bordered
rowKey="id"
:columns="columns"
:dataSource="dataSource"
:pagination="ipagination"
:loading="loading"
《----------》切换radio ,该功能是选中当前表格行属性,type:类型,onChange 选中的方法
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange:onSelectChange,type:'radio'}"
@change="handleTableChange">
</a-table>
export default {
name: 'onceExamSingle',
mixins: [JeecgListMixin],
data() {
return {
columns: [
{
title: '考试编号',
align: 'center',
dataIndex: 'examCode'
},
{
title: '考试名称',
align: 'center',
dataIndex: 'examName'
},
{
title: '考试类型',
align: 'center',
dataIndex: 'examTypeName'
},
{
title: '考试科目',
align: 'center',
dataIndex: 'subName'
},
{
title: '卷面总分',
align: 'center',
dataIndex: 'totalValue'
},
{
title: '考试时间',
align: 'center',
dataIndex: 'examTime'
}
],
url: {
list: '/onceExamAnalyze/queryAnaExamBaseInfo'
},
loading: false,
《-------》属性的定义 否则有可能会出现 单选按钮选中后没效果
selectedRowKeys: [],
}
},
methods: {
/*表格选择事件*/
start() {
this.loading = true;
// ajax request after empty completing
setTimeout(() => {
this.loading = false;
this.selectedRowKeys = [];
}, 1000);
},
选中行的事件
onSelectChange(selectedRowKeys) {
console.log('selectedRowKeys changed: ', selectedRowKeys);
this.selectedRowKeys = selectedRowKeys;
},
表格可以根据自己需要进行封装数据,详细参照文档
vue-ant文档
更多推荐
已为社区贡献2条内容
所有评论(0)