时间戳，分页，截取字符串，父子组件之间传值和调动

• 1.获取选中日期的时间戳
• 2.查询按钮下面，需要添加 ,页码重置
• 3.万能的添加分页
• 4.findIndex查找对应的索引值
• 5.三元表达式花样用法
• 6.怎么让el-input框里面带有固定的字，不是placeholder这个属性
• 7.截取字符串，Date.substring(0,10)
• 8.让列表里面的数据居中align="center"
• 9.添加插槽（vue）
• 10.label根据情况变化
• 11.子组件调用 ·父组件的方法·
• 12.父组件调用 ·子组件的方法·
• 13.父组件向子组件传值
• 14.子组件向父组件传值
• 15.路由退回,返回上一级
• 16.element-ui获取半选状态下父节点
• 17.编辑表单得时候，可能根据id匹配不到name
• 18.表格 -文字超出省略号显示，鼠标经过文字浮窗显示
• 19.表格 -文字超出省略号显示，鼠标经过文字浮窗显示，修改浮窗样式
• 20.在表单上熟练使用三元表达式
• 21.调用后端接口进行排序
• 22.日期的选择范围，
• • 22.1当前日期的前20年
  • 22.2 日期两年内可选
• 23. 给列表添加必填标志

1.获取选中日期的时间戳

 


  methods: {
      dataChange(val) {
          console.log("开始的时间戳", val, new Date(val).getTime());
      //year : new Date().getFullYear(),
      //month : new Date().getMonth() + 1,
      //getDate : new Date().getDate(),
      },
   }

if (new Date(this.addForm.closeDate) < new Date(this.addForm.startDate)) {
    this.$message.error("开始时间不能晚于截止时间时间");
    return;
 }

var cycleEndDate=new Date().getFullYear() + "-" +(new Date().getMonth() + 1) +"-" +new Date().getDate()
console.log(cycleEndDate);//2021-08-04

2.查询按钮下面，需要添加 ,页码重置

例如：
this.currentPage=1

this.total = 1 //共几条数据
this.currentPage = 1 //当前页数
this.pageSize = 10 //每页显示条目个数

3.万能的添加分页

 
 

  data() {
    return {
      // 表格和分页
      total: 1, //共几条数据
      currentPage: 1, //当前页数
      pageSize: 10, //每页显示条目个数
    }
  },

// 分页控制
    handleCurrentChange(val) {
      // 页数赋值
      this.currentPage = val
      // 重新载入
      this.Listdata()
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      // 重新载入
      this.Listdata()
    },

4.findIndex查找对应的索引值

let list= [1, 2, 3, 4, 5, 6, 7, 8]
var mobilePhone = list.findIndex(value => value == "5");//list数组中寻找“5”，返回相应的索引值，找不到返回-1
console.log(mobilePhone, mobilePhone);//4

5.三元表达式花样用法

type==province ? this.provinceOptions = resData.data : type==city? this.cityOptions = resData.data:this.districtOptions=resData.data


 


        

6.怎么让el-input框里面带有固定的字，不是placeholder这个属性

元

7.截取字符串， Date.substring(0,10)

截取0到10区间的部分，包含0，不包含10

  
         


(Number(this.Value)/10000).toFixed(2)

8.让列表里面的数据居中 align="center"

9.添加插槽（vue）

10.label根据情况变化

11.子组件调用 ·父组件的方法·

//儿子
 toBusinessOpportunityDetailsPage(row) {
      this.$emit(toBusinessDetails)
      //this.$emit(fathervoid, false);   false是传参
},

//父亲 @toBusinessDetails="toBusinessDetails"
 
//方法
import creditAndPayment from "./components/creditAndPayment.vue";
export default {
  name:businessDetails,
  data(){
    return{
      activeName:businessDetail,
    }
  },
  components:{creditAndPayment},
  created(){},
  mounted(){},
  methods:{
        toBusinessDetails(){
            this.activeName = businessDetail
        },
  }
}

12.父组件调用 ·子组件的方法·

ref=“rightPageEchartOneDetails”
this.$refs.rightPageEchartOneDetails.reset(‘formInline’)

//父亲
 

import rightPageEchartThreefrom "./rightPageEchartThree.vue";
export default {
  name: "rightPage",
  // import引入的组件需要注入到对象中才能使用
  components: {
    rightPageEchartThree,
  },
 }

props: [activeName, businessInformation],
props: { id: { type: String, default: null, }, },

//子组件
export default {
  name: "rightPageEchartOne",
  // import引入的组件需要注入到对象中才能使用
  components: {
    echarts,rightPageEchartOneDetails
  },
  props: {
    id: {
      type: String,
      default: null,
    },
  },
   data() {
    // 这里存放数据
    return {
      d: "3",
    };
  },
watch: {
    id: {
      deep: true, // deep: true  // 可以深度检测到 test 对象的属性值的变化
      handler(value) {
        this.d = value;
        // console.log("value11111111111", value);
      },
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    if (this.id) {
      this.d = this.id;
      // console.log("this.d11mounted", this.d);
    }
  },

 mounted() {
 //接收this.caseTrend对象
    if(Object.keys(this.caseTrend).length>0){
      this.caseTrendChange =this.caseTrend
    }
  },

14.子组件向父组件传值

//父组件


message(res){
        console.log(res111111111111111111,res);
        this.id=res
}

//子组件
 mounted() {
    this.$emit(message,this.id)
},

15.路由退回,返回上一级

goback
methods:{
  goback(){}
  this.$router.go(-1)
}

路由跳转

 addContactsHandle() {
      this.$router.push({
        path: /contacts,
        query: {
          customerId: this.customerId,
          customerName: this.customerName,
        }
      })
    },

接收路由跳转的参数

this.$route.query.customerId
this.$route.query.customerName

16.element-ui获取半选状态下父节点

1.如果只是获取勾选的节点，无法获取选项的父节点
tree为dom上ref对应的值

this.$refs.tree.getCheckedNodes()

2.获取勾选的所有关联节点（所有的半选节点也一并获取）,低版本element-ui可能不适用
tree为dom上ref对应的值

this.$refs.tree.getCheckedNodes(false,true)

17.编辑表单得时候，可能根据id匹配不到name

v-for="(item,index) in customer" :key="index" ========> v-for="item in customer" :key="item.id"

18.表格 -文字超出省略号显示，鼠标经过文字浮窗显示

1.有插槽

2.无插槽

19.表格 -文字超出省略号显示，鼠标经过文字浮窗显示，修改浮窗样式

20.在表单上熟练使用三元表达式

21.调用后端接口进行排序

sortable="custom"

22.日期的选择范围，

22.1当前日期的前20年

            
            
          

pickerOptions: {
          disabledDate(time) {  
            return time.getTime() < Date.now()-3600 * 1000 * 24 * 365 *20 ||time.getTime() > Date.now();
            //3600 * 1000 一个小时
            //3600 * 1000 * 24 一天
            //3600 * 1000 * 24 * 365  一年
            //3600 * 1000 * 24 * 365 *20  二十年
          },
      },

22.2 日期两年内可选

展示格式和传值

1. format="yyyy-MM-dd" 展示格式 yyyy-MM-dd

2. value-format="yyyy-MM-dd" 向后端传值的格式 yyyy-MM-dd
   也可在data里面定义data(){}
   3.定义可选范围 :picker-options="pickerOptions" ,在data里面定义data(){}

   :format="format" :value-format="valueFormat"

   data(){ format:"yyyy-MM-dd", valueFormat:"yyyy-MM-dd", pickerOptions: { disabledDate(time) { return time.getTime() < Date.now() - (3600 1000 24 365 1)||time.getTime() > Date.now();//两年前之前不可选，今天之后不可选 }, }, }

3. 给列表添加必填标志

   //列表添加必填标志,写在data里面 addRedStar(h, { column }) { return [ h("span", { style: "color: red" }, "*"), h("span", " " + column.label), ]; },