Ant-Design-Vue中关于Table组件的使用

Posted li9club

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Ant-Design-Vue中关于Table组件的使用相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en"> 
<head>
   <meta charset="UTF-8">
    <title>Title</title>
    <link type="text/css" rel="stylesheet" href="./antdesignvue1410/antd.min.css"/>
    <!-- vue 版本需要注意,不是每一个版本都起作用的 -->
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script src="./antdesignvue1410/antd.min.js"></script>
    <!-- 引入 moment.min.js -->
    <script src="./antdesignvue1410/moment.min.js"></script>
</head>
<body>
    <div id="app">
	
	<template>
		<a-table :columns="columns" :data-source="dataSource">
		<!--用v-for遍历模板,直接渲染三个插槽-->
		<template
		  v-for="(col,i) in [‘age‘,‘name‘,  ‘address‘]"
		  :slot="col"
		  slot-scope="text, record, index"
		>
		  <div :key="col">
		  <a v-if="record.editable==false" >{{text}}</a>
			<!--如果record.editable为true,则展示input框,可以修改数据,为false则直接展示数据 -->
			<a-input
			  v-if="record.editable"
			  style="margin: 0px 0"
			  :value="text"
			  @change="e => handleChange(e.target.value, record.key, col)"
			/>  
			
			
		  </div>
		</template>
		
		
			 <template slot="operation" slot-scope="text, record">
	         <a-popconfirm
	           v-if="dataSource.length"
	           title="Sure to delete?"
	           @confirm="() => onDelete(record.key)">
	           <a href="javascript:;">Delete</a>
	         </a-popconfirm>
			 
			 <a-popconfirm
	           v-if="dataSource.length"
	           title="Sure to handleAdd?"
	           @confirm="() => handleAdd()">
	           <a href="javascript:;">add</a>
	         </a-popconfirm>
			 
			 <span >
          <a @click="() => edit(record.key)">Edit</a>
		  <a @click="() => save(record.key)">Save</a>
        </span>
			 
	       </template>	


	
    




		   
		</a-table>
	</template>
      
    </div>
</body>
    
    <script>
        var columns =[
    {title: ‘name‘,dataIndex: ‘name‘,width: ‘25%‘,scopedSlots: { customRender: ‘name‘ }},
    {title: ‘age‘,dataIndex: ‘age‘,width: ‘15%‘,scopedSlots: { customRender: ‘age‘ }},
    {title: ‘address‘,dataIndex: ‘address‘,width: ‘40%‘,scopedSlots: { customRender: ‘address‘ }},
    {title: ‘operation‘,dataIndex: ‘operation‘,scopedSlots: { customRender: ‘operation‘ }}
  ];
 
        var data =  [];
	  for (let i = 0; i < 15; i++) {
    data.push({
      key: i.toString(),
      name: `Edrward ${i}`,
      age: 32,
	  editable:false,
      address: `London Park no. ${i}`,
    });
  };
var vue = new Vue({            
            data() {
			this.cacheData = data.map(item => ({ ...item })); //缓存所有数据
						return {
							dataSource:data,
							columns:columns, 
							count: 15,
						};
					},
			 methods: {
						onCellChange (key, dataIndex, value) {
						//
						
						//
						console.log(key);
						console.log(dataIndex);
						console.log(value);
							const dataSource = [...this.dataSource]
							const target = dataSource.find(item => item.key === key)
							if (target) {
							  target[dataIndex] = value
							  this.dataSource = dataSource
							}
						},
						/**
						   * 修改完成之后点击保存的回调方法
						   * @param key 当前行对应的key值
						   */
						  save(key) {
							const newData = [...this.dataSource];
							console.log(newData);
							const newCacheData = [...this.cacheData];
							console.log(newCacheData);
							const target = newData.filter(item => key === item.key)[0];
							const targetCache = newCacheData.filter(item => key === item.key)[0];
							if (target && targetCache) {
							  target.editable=false; // 删除editable属性
							  this.dataSource = newData;
							  Object.assign(
								targetCache,
								target
							  );
							  console.log(this.cacheData);
							  console.log(newCacheData);
							  this.cacheData = newCacheData;
							}
						  },
						 /**
						   * 点击操作栏中修改的回调方法
						   * @param key 当前行对应的key值
						   */
						  edit(key) {
							const newData = [...this.dataSource];// 直接获取了所有数据
											const target1 = newData.filter(item => key === item.key)[0];   // 在筛选出key值相同的那一条数据
											if (target1) { // 如果数据存在,则给这条数据新增一个属性为editable属性为true => 代表为正在更改中
											  target1.editable = true;
											  this.dataSource = newData;
											}
											console.log(target1);
						  },
						  /**
							   * input的change的回调方法
							   * @param value input框中你输入的值
							   * @param key   当前行对应的key值
							   * @param column  当前列的dataIndex对应的名称,有[‘name‘,‘age‘,‘address‘]
							   */
							  handleChange(value, key, column) {
								const newData = [...this.dataSource];
								const target = newData.filter(item => key === item.key)[0];
								console.log(column);
								if (target) {
								  target[column] = value;
								  this.dataSource = newData;
								}
							  },
						onDelete (key) {
						  const dataSource = [...this.dataSource]
						  this.dataSource = dataSource.filter(item => item.key !== key)
						},
						handleAdd () {
						  const { count, dataSource } = this
						  const newData = {
							key: count,
							name: `Edward King ${count}`,
							age: 32,
							editable:false,
							address: `London, Park Lane no. ${count}`,
						  }
						  this.dataSource = [...dataSource, newData]
						  this.count = count + 1
						},
					  },

           
        }).$mount(‘#app‘);
    </script>

 
</html>

  https://www.cnblogs.com/cirry/p/12459729.html

以上是关于Ant-Design-Vue中关于Table组件的使用的主要内容,如果未能解决你的问题,请参考以下文章

Ant-Design-Vue中关于Form组件的使用

ant-design-vue table表格合计行的实现

ant-design-vue a-table的分页

vue2+ant-design-vue table的使用:customRender

Ant-Design-vue的a-table入门

进阶Ant-Design-Vue你知道table多级表头嵌套展开写法吗?