Ant Design Vue快速入门教程

Ant Design Vue

Ant Design是蚂蚁金服出品的一款前端UI库,官方的介绍是服务于企业级产品的设计体系,基于确定和自然的设计价值观上的模块化解决方案,让设计者和开发者专注于更好的用户体验。简而言之就是一款简洁漂亮的UI库。

环境node.js webpack vscode npm

//安装vue脚手架和ant design vue
npm install -g @vue/cli
npm i --save ant-design-vue
//创建一个vue demo
vue create antd-demo

//在mian.js中完整引入
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css';

Vue.config.productionTip = false

Vue.use(Antd);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

参考文档

使用方法

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
您可以使用Ant Design Vue的Table组件来实现列表编辑功能。以下是一个示例代码,可以帮助您入门: ```vue <template> <div> <a-button type="primary" @click="addRow">添加行</a-button> <a-table :columns="columns" :data-source="dataSource" :row-key="record => record.id" :editable="editable"> <template slot="name" slot-scope="{ text, record, index }"> <a-input v-model="text" @change="handleChange(record, 'name')" /> </template> <template slot="age" slot-scope="{ text, record, index }"> <a-input-number v-model="text" @change="handleChange(record, 'age')" /> </template> <template slot="address" slot-scope="{ text, record, index }"> <a-input v-model="text" @change="handleChange(record, 'address')" /> </template> <template slot="operation" slot-scope="{ text, record, index }"> <a v-if="editable[index]"> <a @click="save(index)">保存</a> <a-divider type="vertical" /> <a @click="cancel(index)">取消</a> </a> <a v-else> <a @click="edit(index)">编辑</a> <a-divider type="vertical" /> <a @click="deleteRow(index)">删除</a> </a> </template> </a-table> </div> </template> <script> export default { data() { return { columns: [ { title: "姓名", dataIndex: "name", key: "name", editable: true, }, { title: "年龄", dataIndex: "age", key: "age", editable: true, }, { title: "地址", dataIndex: "address", key: "address", editable: true, }, { title: "操作", key: "operation", }, ], dataSource: [ { id: 1, name: "张三", age: 18, address: "北京市", }, { id: 2, name: "李四", age: 20, address: "上海市", }, ], editable: [], }; }, methods: { addRow() { const newData = { id: this.dataSource.length + 1, name: "", age: 0, address: "", }; this.dataSource.push(newData); this.editable.push(true); }, edit(index) { this.editable.splice(index, 1, true); }, deleteRow(index) { this.dataSource.splice(index, 1); this.editable.splice(index, 1); }, save(index) { this.editable.splice(index, 1, false); }, cancel(index) { if (this.dataSource[index].id === undefined) { this.dataSource.splice(index, 1); } this.editable.splice(index, 1, false); }, handleChange(record, key) { record[key] = event.target.value; }, }, }; </script> ``` 在这个示例中,我们使用了Ant Design Vue的Table组件来展示一个包含姓名、年龄和地址的列表。每一行数据都可以被编辑,当点击“编辑”按钮时,该行数据变为可编辑状态,在“姓名”、“年龄”和“地址”列中出现输入框,用户可以修改数据。当点击“保存”按钮时,该行数据变为不可编辑状态,修改后的数据被保存。如果用户不想保存修改,可以点击“取消”按钮,该行数据恢复到修改前的状态。 这里我们使用了一个editable数组来记录每一行数据的编辑状态。当用户点击“编辑”按钮时,我们将该行的editable值设为true,当用户点击“保存”或“取消”按钮时,我们将该行的editable值设为false。如果用户点击“删除”按钮,我们将该行数据从dataSource数组中删除,并且将该行的editable值从editable数组中删除。如果用户点击“添加行”按钮,我们创建一个新的空数据,并将其添加到dataSource数组末尾,同时将其editable值设为true。 在“姓名”、“年龄”和“地址”列中,我们使用了具名插槽来定义每一行数据的编辑组件。这里我们使用了Ant Design Vue的Input、InputNumber和Divider组件。 总之,Ant Design Vue的Table组件提供了很多强大的功能,可以帮助我们快速构建各种表格。如果您想了解更多关于Ant Design Vue的Table组件的信息,可以参考官方文档:https://www.antdv.com/components/table-cn/
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值