Ant design-05 表单多选的组件

本节：多选功能的表单

table主要加的内容：

1.<a-table :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"

:columns="columns" :data-source="data" />

2.在data上面加

const data = [];
for (let i = 0; i < 46; i++) {data.push({key: i,name: `Edward King ${i}`,age: 32,address: `London, Park Lane no. ${i}`,});
}

在data，数据里面再加 selectedRowKeys: [], // Check here to configure the default column

3.在methods外面，与created平行加

  computed: {hasSelected() {return this.selectedRowKeys.length > 0;},},

4.在methods里面加方法

 start() {this.loading = true;// ajax request after empty completingsetTimeout(() => {this.loading = false;this.selectedRowKeys = [];}, 1000);},onSelectChange(selectedRowKeys) {console.log('selectedRowKeys changed: ', selectedRowKeys);this.selectedRowKeys = selectedRowKeys;},},

摘抄自：Ant Design Vue

所有代码：

<template><div><div><template><a-breadcrumb separator=""><a-breadcrumb-item>位置</a-breadcrumb-item><a-breadcrumb-separator>:</a-breadcrumb-separator><a-breadcrumb-item href=""> 一级页面 </a-breadcrumb-item><a-breadcrumb-separator /><a-breadcrumb-item href=""> 二级页面 </a-breadcrumb-item></a-breadcrumb></template></div><div class="top"><div style="display: flex; margin-left: 30px; align-items: center"><div style="display: flex; align-items: center"><div>所属栏目：</div><div><a-form-model-item><a-select show-search placeholder="请选择" style="width: 150px" v-model="suosColum"><a-select-option v-for="(col, index) in column" :key="index" :value="col.id">{{ col.title }}</a-select-option></a-select></a-form-model-item></div></div><div style="display: flex; margin-left: 30px; align-items: center"><div>栏目名称：</div><div><a-input placeholder=" 请输入" v-model="suosName" /></div></div><div @click="suos()" style="margin-left: 30px"><a-button type="primary" style="width: 50px" icon="search" /></div></div></div><div class="bottom"><div><a-button type="primary" @click="addModelShow"> 新增 </a-button></div><!-- 表格内容 --><div style="margin-top: 30px; width: 80vw"><a-table:columns="columns":data-source="data":key="ii + 1"@change="handleTableChange":pagination="pagination":row-key="(record) => record.id":row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"><a slot="name" slot-scope="text">{{ text }}</a><span slot="action" slot-scope="text, record"><div style="display: flex"><div style="color: #2e71fe" @click="updataModelShow(record)">编辑</div><div style="color: #2e71fe; margin-left: 20px" @click="del(record)">删除</div></div></span></a-table></div></div><div></div><!-- 新增 --><a-modal v-model="addData_see" title="新增资源" okText="确认" cancel-text="取消" @ok="addOK" @cancel="addCancel"><a-form-model :model="addData" :label-col="{ span: 5 }" :wrapper-col="{ span: 16 }" :rules="rules" ref="addData"><a-form-model-item label="标题" prop="title"><a-input v-model="addData.title" /></a-form-model-item><a-form-model-item label="所属栏目" prop="sectionId"><a-select show-search placeholder="请选择" v-model="addData.sectionId"><a-select-option v-for="(col, index) in column" :key="index" :value="col.id">{{ col.title }}</a-select-option></a-select></a-form-model-item><a-form-model-item label="资源格式"><a-radio-group v-model="addData.choice"><a-radio value="附件">文件附件</a-radio><a-radio value="链接">网盘链接</a-radio></a-radio-group></a-form-model-item><a-form-model-item label="上传附件" prop="cover" v-if="addData.choice == '附件' ? true : false"><upload-widget v-model="addData.cover"></upload-widget></a-form-model-item><a-form-model-item label="标题" prop="titles" v-if="addData.choice == '链接' ? true : false"><a-input v-model="addData.titles" /></a-form-model-item><a-form-model-item label="链接" prop="link" v-if="addData.choice == '链接' ? true : false"><a-input v-model="addData.link" /></a-form-model-item><a-form-model-item label="提取码" prop="fetchCode" v-if="addData.choice == '链接' ? true : false"><a-input v-model="addData.fetchCode" /></a-form-model-item></a-form-model></a-modal><!-- 修改 --><a-modal v-model="update_see" title="修改资源" okText="确认" cancel-text="取消" @ok="updateOK" @cancel="updateCancel"><a-form-model :model="updataData" :label-col="{ span: 5 }" :wrapper-col="{ span: 16 }" :rules="rules" ref="updataData"><a-form-model-item label="标题" prop="title"><a-input v-model="updataData.title" /></a-form-model-item><a-form-model-item label="所属栏目" prop="sectionId"><a-select show-search placeholder="请选择" v-model="updataData.sectionId"><a-select-option v-for="(col, index) in column" :key="index" :value="col.id">{{ col.title }}</a-select-option></a-select></a-form-model-item><a-form-model-item label="资源格式"><a-radio-group v-model="updataData.choice"><a-radio value="附件">文件附件</a-radio><a-radio value="链接">网盘链接</a-radio></a-radio-group></a-form-model-item><a-form-model-item label="上传附件" prop="cover" v-if="updataData.choice == '附件' ? true : false"><upload-widget v-model="updataData.cover"></upload-widget></a-form-model-item><a-form-model-item label="标题" prop="titles" v-if="updataData.choice == '链接' ? true : false"><a-input v-model="updataData.titles" /></a-form-model-item><a-form-model-item label="链接" prop="link" v-if="updataData.choice == '链接' ? true : false"><a-input v-model="updataData.link" /></a-form-model-item><a-form-model-item label="提取码" prop="fetchCode" v-if="updataData.choice == '链接' ? true : false"><a-input v-model="updataData.fetchCode" /></a-form-model-item></a-form-model></a-modal></div>
</template><script>
const columns = [{title: '序号',dataIndex: 'id',key: 'id',},{title: '标题',dataIndex: 'title',key: 'title ',},{title: '所属栏目',dataIndex: 'sectionId',key: 'sectionId 1',ellipsis: true,},{title: '创建时间',dataIndex: 'created',key: 'created 2',ellipsis: true,},{title: '操作',dataIndex: 'action',key: 'action 5',scopedSlots: { customRender: 'action' },ellipsis: true,},
];const data = [];
for (let i = 0; i < 46; i++) {data.push({key: i,name: `Edward King ${i}`,age: 32,address: `London, Park Lane no. ${i}`,});
}
import moment from 'moment';
export default {data() {return {column: [], //一级目录addData_see: false,update_see: false,choutidata: '',suosName: '',suosColum: '',selectedRowKeys: [], // Check here to configure the default columnii: '',dateFormat: 'YYYY/MM/DD',monthFormat: 'YYYY/MM',//   data,columns,data: [],addnew: false,Drawer: false,pagination: { pageSize: 5, total: 100, current: 1, showSizeChanger: true },addData: {id: '',sectionId: undefined,title: '',choice: '附件', //选择类型cover: '',titles: '',link: '',fetchCode: '',},updataData: {id: '',sectionId: undefined,title: '',choice: '附件', //选择类型cover: '',titles: '',link: '',fetchCode: '',},rules: {title: [{ required: true, message: '请输入内容!', trigger: 'blur' }],sectionId: [{ required: true, message: '请选择栏目!', trigger: 'change' }],resourceLink: [{ required: true, message: '请上传图片!', trigger: 'blur' }],titles: [{ required: true, message: '请输入内容!', trigger: 'blur' }],link: [{ required: true, message: '请输入内容!', trigger: 'blur' }],cover: [{ required: true, message: '请输入内容!', trigger: 'blur' }],fetchCode: [{ required: true, message: '请输入内容!', trigger: 'blur' }],},};},created() {this.loadList();this.getColumn();},computed: {hasSelected() {return this.selectedRowKeys.length > 0;},},methods: {// 清空qk() {this.suosName = '';this.suosColum = '';},//读取一级栏目async getColumn() {let reqData = {};let getListUrl = `/section/list`;let result = await this.axios.get(getListUrl, reqData);this.column = result.data.data;console.log(this.column);},// 新增显示框addModelShow(record) {this.updataData=record;this.addData_see = true;this.addOK();},// 新增async addOK() {let reqData = this.addData;let saveUrl = `/resource/save/`;let result = await this.axios.post(saveUrl, reqData);this.loadList();this.addData_see = false;console.log(result);},// 取消新增addCancel() {this.addData_see = false;},//修改显示框updataModelShow() {this.update_see = true;this.updateOK();},// 修改功能async updateOK() {let reqData = this.updataData;let updateUrl = `/resource/update`;let result = await this.axios.post(updateUrl, reqData);this.loadList();this.update_see = false;console.log(result);},// 取消修改updateCancel() {this.update_see = false;},// 搜索async suos() {let reqData = { cover: '', accessoryList: [{ path: '', resourceId: 0, fileName: '', id: 0 }], link: '', id: '', sectionId: this.suosColum, title: this.suosName, content: '', status: '上架' };let reqParam = { pageNumber: '0', pageSize: '0' };let searchUrl = `/resource/search/${reqParam.pageNumber}/${reqParam.pageSize}`;let result = await this.axios.post(searchUrl, reqData);this.data = result.data.data;console.log(result);this.qk();},// 全选功能start() {this.loading = true;// ajax request after empty completingsetTimeout(() => {this.loading = false;this.selectedRowKeys = [];}, 1000);},onSelectChange(selectedRowKeys) {console.log('selectedRowKeys changed: ', selectedRowKeys);this.selectedRowKeys = selectedRowKeys;},moment,/**分页 */handleTableChange(pagination, filters, sorter) {this.pagination = pagination; //保存分页信息this.loadArticleList(); //重新读取文章列表},// h获取所有数据async loadList() {let reqData = { cover: '', accessoryList: [{ path: '', resourceId: 0, fileName: '', id: 0 }], link: '', id: '', sectionId: '', title: '', content: '', status: '上架' };let reqParam = { pageNumber: '0', pageSize: '0' };let searchUrl = `/resource/search/${reqParam.pageNumber}/${reqParam.pageSize}`;let result = await this.axios.post(searchUrl, reqData);this.data = result.data.data;console.log(result);},// 删除async del(i) {let reqData = {};let reqParam = { id: i.id };let deleteUrl = `/resource/delete/${reqParam.id}`;let result = await this.axios.delete(deleteUrl, reqData);console.log(result);this.loadList();alert('恭喜你，删除成功！');},// 抽屉的方法afterVisibleChange(val) {console.log('Drawer', val);},// 抽屉功能async showDrawer(j) {this.Drawer = true;let reqData = {};let reqParam = { id: j.id };let findUrl = `/consult/find/${reqParam.id}`;let result = await this.axios.get(findUrl, reqData);this.choutidata = result.data.data;console.log(result);},// 取消显示抽屉onClose() {this.Drawer = false;},},
};
</script><style>
.top {background-color: #fff;width: 85vw;height: 80px;margin-top: 20px;display: flex;align-items: center;border-radius: 5px;
}
.bottom {background-color: #fff;width: 85vw;height: 680px;margin-top: 30px;border-radius: 5px;padding-left: 30px;padding-top: 30px;
}
.leftchouti {padding: 20px;
}
.bulePiece {background-color: #2e71fe;width: 5px;height: 30px;
}
.titleBule {color: #2e71fe;font-size: 22px;margin-left: 10px;
}
.choutifont {width: 100%;height: 30px;display: flex;
}
.choutiButtonConnet {padding: 30px;
}
.zixunwenti {color: #2e71fe;font-size: 16px;margin-top: 20px;
}.line2 {width: 100% !important;border-bottom: 1px solid #e7e7e8;margin-top: 400px;
}
.content {background-color: #f5f6f8;border-radius: 5px;padding: 15px 15px 25px 15px;
}
</style>

Ant design-05 表单多选的组件相关推荐

android 自定义表单,Android实现Ant Design 自定义表单组件
Ant Design 组件提供了Input,InputNumber,Radio,Select,uplod等表单组件,但实际开发中这是不能满足需求,同时我们希望可以继续使用Form提供的验证和提示等方法 ...
ant design form表单的时间处理
ant design form表单的时间处理用ant design开发程序时,会碰到时间的字段,效果如下: 那么该怎么处理呢? 可以在表单中使用如下代码: import { DatePicker } ...
实现Ant Design 自定义表单组件
Ant Design 组件提供了Input,InputNumber,Radio,Select,uplod等表单组件,但实际开发中这是不能满足需求,同时我们希望可以继续使用Form提供的验证和提示等方法 ...
antdesign卡片_10分钟精通Ant Design Form表单
目录被人诟病的Form Form的原理 Vue版Form的进化史本文适合React.Vue开发者阅读,10分钟不够?那就再加10分钟. 被人诟病的Form antd被人吐槽最多的除了彩蛋之外,那应该就 ...
[ant design vue] 表单验证成功，提示信息不显示
以上是原图以及源代码,input中带有表单验证,但是输入0以后却不显示报错信息,后来通过大哥指点,因为一个a-form-item只验证一个input,所以给每一个input加一个a-form-item ...
Ant Design Vue表单验证基本操作
通过 rules 属性传入约定的验证规则.并将 <a-form-item> 的 prop 属性设置为需校验的字段名即可 formRef.value .validate() 触发效验提示通 ...
[ant design vue] 关于ant design vue 表单报错合集
情况一:当我点击新增时会报以下错误: 原因是我在使用v-decorator的同时使用了v-model,如下图: 解决方案就是:把v-model删掉,需要动态获取值,可以通过: this.form.ge ...
css复选框表单,用CSS来美化表单——复选按钮篇
原标题:用CSS来美化表单--复选按钮篇今天,我们来学习如何利用CSS美化checkbox复选框按钮,过程非常简单,本文主要是提供美化复选框按钮的方法,至于美化到何种程度还需大家自己去举一反三,发挥 ...
php中得到复选框的数据的代码,表单复选框向PHP传输数据的代码
表单复选框向PHP传输数据的代码表单复选框就是checkbox 1.checkbox的应用复制代码代码如下: 2.由于我传输的是在php循环中产生的数组,因此value也要设成变量: for($ ...

Ant design-05 表单多选的组件

Ant design-05 表单多选的组件相关推荐

最新文章

热门文章