Ant design Vue学习
1、allowClear 允许清除选项的内容2、a-form-item必须放进a-col里面,更多的内容放到a-form-item里面<a-form-itemlabel="标的">label的值,是代表前面红框中的字:3、@change选项改变的事件<a-col :md="4" :sm="8"><a-form-itemlabe...
·
1、allowClear 允许清除选项的内容
2、a-form-item必须放进a-col里面,更多的内容放到a-form-item里面
<a-form-item label="标的">
label的值,是代表前面红框中的字:
3、@change选项改变的事件
<a-col :md="4" :sm="8">
<a-form-item label="">
<a-select placeholder="请选择" allowClear v-model=" " @change="selectChange">
<a-select-option v-for="item in " :key=" " >
{{ }}
</a-select-option>
</a-select>
</a-form-item>
</a-col>
4、上传文件
<a-upload name="file" :showUploadList="false" :multiple="false" :headers=" " :action=" " @change="handleImport">
<a-button type="primary" style="margin-top: 8px;" icon="import" >导入</a-button>
</a-upload>
5、a-table的使用
<a-table
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
style="margin-top: 18px;"
:scroll="{ x: 1050, y: 500 }"
@showSizeChange="onShowSizeChange"
:columns="columns"
:pagination="pagination"
:dataSource="dataSource"
:rowKey="(data, index) => index">
<!--:dataSource是整个table的数据;rowSelection:table中前面的多选框;
scroll:是横向纵向超过一定限度会显示下拉框;columns是行数;
:pagination是分页器;@showSizeChange是每页显示条数改变时的事件;
:rowKey为每行设置key;-->
<template
v-for="(col,key) in ['num', ' ', ' ',' ',' ',' ']"
:slot="col"
slot-scope="text, record, index">
<div :key="col" >
<span>{{text}}</span>
</div>
</template>
<template slot="wtVolume" slot-scope="text, record, index">
<!--slot="wtVolume" 是对应的某一列要设置input输入-->
<span>
<a-input-number
name="name"
:min="1"
placeholder="请输入"
style="width: 100%;"
v-model="text"
@change="changeTableInput(text, record, index)"/>
<!--v-model进行双向绑定,text是input的值,record的是整行的数据,index是第几行-->
</span>
</template>
</a-table>
解决办法:
在table中设置 :rowKey="(data, index) => index"
data中设置:
selectedRowKeys: [],
columns: [
<!--设置序号为自增-->
{
title: '序号',
defaultValue: '',
key: 'num',
dataIndex: 'num',
customRender: (value, row, index) => `${(index+1)}`,
scopedSlots: { customRender: 'num' },
width:'10%',
},
<!--设置筛选-->
{
title: '市场',
defaultValue: '',
key: ' markert',
dataIndex: 'markert',
filters: [
{
text: 'markert',
value: 'markert',
},
{
text: 'markert',
value: 'markert',
},
],
onFilter: (value, record) => record.markert .indexOf(value) === 0,
scopedSlots: { customRender: 'markert' },
width:'10%',
},
<!--设置排序-->
{
title: '分数',
defaultValue: '',
key: 'mark',
dataIndex: 'mark',
sorter: (a, b) => a.mark - b.mark,
scopedSlots: { customRender: 'mark' },
width:'15%',
},
]
/* 分页参数 */
pagination: {
pageSize: 20, // 默认每页显示数量
showSizeChanger: true, // 显示可改变每页数量
pageSizeOptions: ['10', '20', '30', '40'], // 每页数量选项
showTotal: total => `总共 ${total} 条`, // 显示总数
showSizeChange: (current, pageSize) => this.pageSize = pageSize, // 改变每页数量
时更新显示
},
methods设置:
onShowSizeChange(current, pageSize) {
let that = this;
that.pagination.pageSize = pageSize;
},
onSelectChange (selectedRowKeys) {
this.selectedRowKeys = selectedRowKeys;
},
6、this.$message.warn(" ");
JSON.stringify()将Object转义为字符串
Number()将字符串转数字
if(!isNumeric( )){}
7、
导出:
导入:
8、解决 小数*100之后变成0.0000007的问题:
Math.round((0.07* 100)*10000)/10000
9、金额截取小数点之前的数字
BlurText(e){
let boolean = new RegExp("^[1-9][0-9]*$").test(e.target.value);
if(!boolean){
var rateM = markScore.toString().split(".")[0];
this.$set(this.model, 'rate', rateM);
e.target.value=''
}
},
更多推荐
已为社区贡献11条内容
所有评论(0)