ant design of vue学习之表格Table

Ant design vue学习之表格Table

columns.js

表格列的配置，处理数据用于表格展示

const columns = [
	{
		title: '序号',
	    width: 80,
	    dataIndex: 'index',
	    customRender: (text, record, index) => {
	      return index + 1
	    },
	    align: 'center',
	    fixed: 'left'
	},
	{
        title: '标题',
        dataIndex: 'title',
        align: 'center',
        scopedSlots: {
          customRender: "myTitle",
        }
    },
    {
	    title: '类型',
	    dataIndex: 'type',
	    align: 'center',
	    customRender: (text, record, index) => {
	      return text === 1 ? '图文' : '视频'
	    }
	},
	{
	    title: '操作',
	    width: 200,
	    dataIndex: 'action',
	    align: 'center',
	    scopedSlots: {
	      customRender: 'action'
	    },
	    fixed: 'right'
	 }
]

使用

1、rowKey=“id” (每一行的标识，rowSelection获取的就是选中行的rowKey)
2、:rowSelection=“{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}” （选中行控制）

<a-table    rowKey="id"	
			size="small"
			bordered
			:columns="columns"
			:dataSource="dataList"
			:scroll="{x:1500}"	
	        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"/>
	        <template slot="myTitle"
		              slot-scope="title,record">
		      <a href="javascript:;">{{title}}</a>
		    </template>
	        <span slot="action" slot-scope="text,record">
				<a href="javascript:;" @click="openDetailModal(record)">详情</a>
				<a-divider type="vertical"/>
				<a-dropdown>
					<a-menu slot="overlay">
						<a-menu-item>
							<a href="javascript:;" @click="openChangeModal(record)">修改</a>
						</a-menu-item>
						<a-menu-item>
							<a-popconfirm title="是否删除这条数据？"
										  @confirm="remove(record)"
										  okText="是"
										  cancelText="否"
										  placement="topRight">
								<a class="txt-danger" href="javascript:;">删除</a>
							</a-popconfirm>
						</a-menu-item>
					</a-menu>
					<a href="javascript:;">更多<a-icon type="down"/></a>
				</a-dropdown>
			</span>
</a-table>

data(){
	columns,
	dataList:[],
	selectedRowKeys:[]
},
methods:{
	onSelectChange(selectedRowKeys){
		this.selectedRowKeys = selectedRowKeys;
	}
}

2、columns.js 复杂

表头分组：可以内嵌 children，以渲染分组表头。
过滤：使用 filters以及onFilter
排序：使用 sorter: (a, b) => a.age - b.age,

<template>
  <a-table
    :columns="columns"
    :dataSource="data"
    bordered
    size="middle"
    :scroll="{ x: '130%', y: 240 }"
  />
</template>
<script>
  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
      width: 100,
      fixed: 'left',
      //过滤
      //筛选条件编辑
      filters: [
        {
          text: 'Joe',
          value: 'Joe',
        },
        {
          text: 'John',
          value: 'John',
        },
      ],
      //获取value, record  根据return  true 或者 false 进行筛选
      onFilter: (value, record) => record.name.indexOf(value) === 0,
    },
    {
      title: 'Other',
      children: [
        {
          title: 'Age',
          dataIndex: 'age',
          key: 'age',
          width: 200,
          //排序
          sorter: (a, b) => a.age - b.age,
        },
        {
          title: 'Address',
          children: [
            {
              title: 'Street',
              dataIndex: 'street',
              key: 'street',
              width: 200,
            },
            {
              title: 'Block',
              children: [
                {
                  title: 'Building',
                  dataIndex: 'building',
                  key: 'building',
                  width: 100,
                },
                {
                  title: 'Door No.',
                  dataIndex: 'number',
                  key: 'number',
                  width: 100,
                },
              ],
            },
          ],
        },
      ],
    },
    {
      title: 'Company',
      children: [
        {
          title: 'Company Address',
          dataIndex: 'companyAddress',
          key: 'companyAddress',
        },
        {
          title: 'Company Name',
          dataIndex: 'companyName',
          key: 'companyName',
        },
      ],
    },
    {
      title: 'Gender',
      dataIndex: 'gender',
      key: 'gender',
      width: 80,
      fixed: 'right',
    },
  ];

  const data = [];
  for (let i = 0; i < 100; i++) {
    data.push({
      key: i,
      name: 'John Brown',
      age: i + 1,
      street: 'Lake Park',
      building: 'C',
      number: 2035,
      companyAddress: 'Lake Street 42',
      companyName: 'SoftLake Co',
      gender: 'M',
    });
  }

  export default {
    data() {
      return {
        data,
        columns,
      };
    },
  };
</script>

完整实例

<template>
  <a-table :columns="columns"
           :dataSource="dataList"
           bordered>
    <template slot="name"
              slot-scope="name,record">
      <a href="javascript:;">{{record.name}}</a>
    </template>
    <span slot="action"
          slot-scope="record">
      <a href="javascript:;">详情</a>
      <a-divider type="vertical" />
      <a-dropdown>
        <a-menu slot="overlay">
          <a-menu-item>
            <a href="javascript:;">修改</a>
          </a-menu-item>
          <a-menu-item>
            <a-popconfirm title="是否删除？"
						 @confirm="remove(record)"
						  okText="是"
						  cancelText="否"
						  placement="topRight">
				<a class="txt-danger" href="javascript:;">删除</a>
			</a-popconfirm>
          </a-menu-item>
          <a-menu-item>
            <a href="javascript:;"
               @click="exportToExcel(record.key)">导出</a>
          </a-menu-item>
        </a-menu>
        <a href="javascript:;">更多
          <a-icon type="down" /></a>
      </a-dropdown>
    </span>
  </a-table>
</template>

<script>

const dataList = [
  {
    key: '1',
    name: 'Brown John',
    age: 32,
    tel: '0571-22098909',
    phone: 18889898989,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    tel: '0571-22098333',
    phone: 18889898888,
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'Sidney No. 1 Lake Park',
  },
  {
    key: '4',
    name: 'Jim Red',
    age: 18,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'London No. 2 Lake Park',
  },
  {
    key: '5',
    name: 'Jake White',
    age: 18,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'Dublin No. 2 Lake Park',
  },
];
const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    filters: [
      {
        text: 'Joe',
        value: 'Joe',
      },
      {
        text: 'John',
        value: 'John',
      },
    ],
    onFilter: (value, record) => record.name.indexOf(value) != -1,
    scopedSlots: {
      customRender: "name",
    }
  },
  {
    title: 'Age',
    dataIndex: 'age',
    sorter: (a, b) => a.age - b.age,
  },
  {
    title: "手机",
    children: [
      {
        title: 'Home phone',
        dataIndex: 'tel',
      },
      {
        title: 'Phone',
        dataIndex: 'phone',
      },
    ]
  },
  {
    title: 'Address',
    dataIndex: 'address',
  },
  {
    title: "操作",
    key: "action",
    width: 160,
    scopedSlots: {
      customRender: "action",
    }
  }
];
export default {
  data () {
    return {
      dataList,
      columns,
    };
  },
  methods: {
    exportToExcel (id) {
      console.log(id)
    }
  }
};
</script>