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

原文地址:https://www.cnblogs.com/li9club/p/12706614.html

时间: 04-14

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

Ant Design Pro 中的服务端交互

前端请求流程 在 Ant Design Pro 中,一个完整的前端 UI 交互到服务端处理流程是这样的: UI 组件交互操作: 调用 model 的 effect: 调用统一管理的 service 请求函数: 使用封装的 request.js 发送请求: 获取服务端返回: 然后调用 reducer 改变 state: 更新 model 统一的请求处理都放在 services 文件夹中,并且一般按照 model 维度进行拆分文件 services/ user.js api.js ... 其中,ut

ant design vue中点击编辑,表单数据的绑定

在一般的表单中,都是使用v-model来双向绑定数据,但是ant design vue中则会给予警告 1,获取数据: getNews({ params: { Id: i //传进来的id等值,具体看后端要什么 } }).then(res => { console.log(res) if (res.code == 0) { this.form.setFieldsValue({ title: res.data.title, introduce: res.data.introduce }) } })

实战 ant design pro 中的坑

1.前戏: 1,替换mock数据: 1.将:.roadhogrc.mock.js 中的代理模式替换 当不使用代理的时候就会将所有 /api/*的链接换成 http://localhost:8080/ export default noProxy ? {'GET /api/*':'http://localhost:8080/'} : delay(proxy, 1000); 2.启动: window:npm run start:no-proxy 其他系统没试 坑 1. what?这是什么鬼没设置ke

Element ui 中使用table组件实现分页记忆选中

我们再用vue和element-ui,或者其他的表格的时候,可能需要能记忆翻页勾选,那么实现以下几个方法就ok了 首先定义个data值 data () { return { multipleSelectionAll: [], // 所有选中的数据包含跨页数据 idKey: 'personId' // 标识列表数据中每一行的唯一键的名称(需要按自己的数据改一下) } } 方法中定义以下: methods : { // 设置选中的方法 setSelectRow() { if (!this.multi

vue中修改子组件样式

一.全局修改 1.在App.vue中设置,引入公共样式及个别页面的特殊样式common.css: 例如:<link rel="stylesheet" type="text/css" href="static/assets/css/common.css"> 下边的写法没用过参考链接中给的 <a href="http://home.cnblogs.com/u/134870/" target="_blan

vue中使用keepAlive组件缓存遇到的坑

项目开发中在用户由分类页category进入detail需保存用户状态,查阅了Vue官网后,发现vue2.0提供了一个keep-alive组件. 上一篇讲了keep-alive的基本用法,现在说说遇到的坑. 先说项目中的配置 在App.vue中的设置 在router中增加配置meta 上面这个设置后发现问题了,从category进入detail页后,状态被保存了,返回的时候保存了用户状态,达到了预期效果 但问题在于但从category返回到index后,再由index进入category时依然显

Vue中,父组件向子组件传值

1:在src/components/child/文件夹下,创建一个名为:child.vue的子组件 2:在父组件中,设置好需要传递的数据 3:在App.vue中引入并注册子组件 4:通过v-bind属性绑定并赋值给子组件 5:子组件通过 props 接收父组件传递过的数据 6:查看 7:总结: 子组件在props中创建一个属性,用以接收父组件传过来的值 父组件中注册子组件 在子组件标签中添加子组件props中创建的属性 把需要传给子组件的值赋给该属性 原文地址:https://www.cnblo

在vue中让某个组件重新渲染的笨方法

在vue中,推崇的是数据驱动也就是数据更新进而使组件得以重新渲染:在某些情况下,我们想要在数据不改变的情况下,重新渲染组件:我遇到的一个情况是:同一个页面,两个tab页分别为tab1和tab2,公用了一个组件,在tab1页修改了数据,再去tab2页查看的时候,发现tab1修改的数据会在tab2中的组件中显示,为了能够使得公用的组件重新渲染,可以使用v-if指令进行合理处理. 原文地址:https://www.cnblogs.com/llcdxh/p/9357661.html

vue中封装svg-icon组件并使用

vue中使用svg图片有很多便捷方式,在这里记录一下模仿参考的过程,仅做一标记,方便后续回来查找 附上参考地址:https://juejin.im/post/59bb864b5188257e7a427c09 1.使用vue-cli3.0脚手架运行搭建一个项目,地址 截图如下: 2.components文件下新建SvgIcon组件 文件中的代码: 原文地址:https://www.cnblogs.com/lhjfly/p/10756650.html

vue中的全局组件和局部组件的应用

1全局组件 vue框架: https://www.vue-js.com/?tab=all 组件树 solt 内置分发组件 应用见局部组件 2局部组件 2.1局部组件的使用:生子 - 挂子 - 用子 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> &l