Ant design Vue学习

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=''
    }
},