【无标题】

Ant Design of Vue

官方文档：链接

• form表单
• 如需要使用 v-model 双向绑定式的校验功能可使用新的表单 a-form-model

  <a-form-model :model="form" name="form" >
          <a-form-model-item label="colon无冒号" name="select" :colon="false">
            <a-select v-model:value="form.select" >
              <a-select-option value="1">是</a-select-option>
              <a-select-option value="0">否</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item  label="有冒号" name="input" :colon="true">
            <a-input v-model:value="form.input"
              placeholder="请输入……" />
          </a-form-model-item>
          <a-form-model-item label="开始时间-结束时间（是数组，allowClear不允许清除）" name="rqsz" :colon="false">
            <a-range-picker :allowClear='false' v-model="form.rqsz" format="YYYY-MM-DD"
              @change="onChangeRangeDate" />
         </a-form-model-item>
         <a-form-model-item label="选择日期" name="rq" :colon="false">
            <a-date-picker v-model:value="form.rq" :allowClear='true' placeholder="请选择日期"
              @change="getqfrqEnd()"></a-date-picker>
          </a-form-model-item>
          <a-form-model-item>
            <a-button type="primary"@click="get()">查询</a-button>
            <a-button @click="rese()">重置</a-button>
          </a-form-model-item>
     </a-form-model>

//日期格式
        a=this.$moment(a).format('YYYY-MM-DD');
        b=this.$moment(a).format('YYYY-MM-DD');
        //获取当前时间
		getGreatTime(){
		        var date = new Date();
		        var year = date.getFullYear();
		        var month = date.getMonth() + 1;
		        if(month >= 1 && month <= 9) {
		          month = "0" + month;
		        }
		        var strDate = date.getDate();
		        if(strDate >= 0 && strDate <= 9) {
		          strDate = "0" + strDate;
		        }
		        var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
		        var minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
		        var second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
		        
		        var creatTime=year+'-'+month+'-'+strDate+' '+hour+':'+minute+':'+second;
		        console.log(creatTime)
		        return creatTime;
		      },

• table 表格

<a-table 
   bordered 
    :columns="tz_Header" 
    :data-source="tz_Data" 
    :row-selection="{ selectedRowKeys: selectedRowKeys,selectedRows : selectedRows, onChange: onSelectChange }" 
    :pagination="pagination"
    :customRow="handleClickRow"
    >
      <a slot="action" slot-scope="text,reconde" href="javascript:;">
        <div @click="edit(reconde)">编辑</div>
      </a>
      <span slot="xh" slot-scope="text,reconde,index">{{ index+1 }}</span>
  </a-table>

data() {
      return {
      //表头
		tz_Header: [
			{
			   title: '序号',
	            dataIndex: 'xh',
	            key: 'xh',
	             ellipsis: true,
	            align: 'center',
	            scopedSlots: {
	             customRender: 'xh'
            	}
		}
		],
        tz_Data: [],//内容
        selectedRowKeys: [],//选择的行数
        selectedRows:[],//选择的内容
        //分页
        pagination: {
          current: 1, // 默认当前页数
          pageSize: 10, // 默认当前页显示数据的大小
          total: 0, // 总数
          showQuickJumper: true, 
          showSizeChanger: true,
          pageSizeOptions: ['10', '20', '30', '50'],
          showTotal: (total) => '共' + ` ${total} ` + '项',
          buildOptionText: (size) => {
            return Number(size.value) + ' 项' + '/' + '页'
          },
        },
      }
}

//选择侧边选择框
onSelectChange(selectedRowKeys,selectedRows) {
        this.selectedRowKeys = selectedRowKeys;
        this.selectedRows = selectedRows;
  },
//点击分页中数字时触发的方法
   handleTableChange(paginat,ind,val,inf) {
      this.pagination.current=paginat.current;
      this.pagination.pageSize=paginat.pageSize;
      console.log("切换页码")
 },
//点击某一行执行函数
handleClickRow(record, index) {
        return {
          on: {
            click: (event) => {
              //单击
            },
            dblclick: (event) => {
              //双击
            },
          }
        }
      },

• 弹窗

<a-modal
      v-model:visible="visible"
      title="弹窗"
      :footer="null"
      :destroyOnClose="true"
      wrapClassName="full-modal"
    >
      <div >
          
      </div>
      //visible：false关闭，true打开
      // wrapClassName外层容器的类名，通过它来控制各个组件的modal样式，还不会相互影响。
 </a-modal>

//提示框
const sef = this;
this.$confirm({
   title: '确定删除',
   okText: '确认',
   cancelText: '取消',
   onOk() {
     // console.log('OK');
     sef.todelete()
   },
   onCancel() {
     console.log('Cancel');
   },
   class: 'test',
 });

• 父级页面给子页面传参数

//父级
<Adddata v-if="this.openWhat==='add'" :id="postID" :toxq="toxq"></Adddata> 
//子级
props:['id'，“toxq”],
//使用this.id调用

• 子页面调用父页面函数

//父级
provide(){
      return{
        hs:this.hs,
      }
   },
  methods: {
	hs（）{}
}
//子级
inject:['hs']
//this.hs调用

• 计算日期差
  出处：文章地址

    let date1 = new Date('2020-12-02 12:30:54')
    let date2 = new Date('2020-12-02 15:38:09')
 
    let s1 = date1.getTime(),s2 = date2.getTime();
    let total = (s2 - s1)/1000;
 
    let day = parseInt(total / (24*60*60));//计算整bai数天du数
    let afterDay = total - day*24*60*60;//取得值算出天数后dao剩余的转秒数shu
    let  hour = parseInt(afterDay/(60*60));//计算整数小时数
    let afterHour = total - day*24*60*60 - hour*60*60;//取得算出小时数后剩余的秒数
    let min = parseInt(afterHour/60);//计算整数分
    let afterMin = total - day*24*60*60 - hour*60*60 - min*60;//取得算出分后剩余的秒数
 
//  console.log('day',day)
//  console.log('afterDay',afterDay)
//  console.log('hour',hour)
//  console.log('afterHour',afterHour)
//  console.log('min',min)
//  console.log('afterMin',afterMin)
 let hous=(afterDay/3600).toFixed(2)//截取小数点后两位.toFixed(2)
//获取系统时间
var date = new Date();
date=this.$moment(date.toLocaleDateString()).format('YYYY-MM-DD');

##延迟执行

//延迟执行
      sleep(numberMillis){    
        var now = new Date();    
        var exitTime = now.getTime() + numberMillis;   
        while (true) { 
          now = new Date();       
          if (now.getTime() > exitTime) return;
        }     
      },
      //给子页面调用的函数，关闭modal
      closemodal(){
        this.sleep(150);
       //接下来要执行的内容
      },