ant官网文档链接

ant-table

  • 选中 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文档

Logo

前往低代码交流专区

更多推荐