日历的DatePicker结束时间不能小于开始时间。
HTML
<DatePicker type="date" :options="startTimeData" @on-change="startTimeChange" placeholder="请选择开始时间" v-model="starttime"></DatePicker>
<DatePicker type="date" :options="endTimeData" @on-change="endTimeChange" placeholder="请选择结束时间" v-model="endtime"></DatePicker>
JS
export default {
data() {
return {
startTimeData: {},
endTimeData: {},
starttime: '',
endtime: ''
}
},
methods: {
//开始时间
startTimeChange: function(e) {
// 当前日期之前不可选
disabledDate (date) {
return date && date.valueOf() < Date.now() - 86400000;
}
this.starttime = e;
this.endTimeOptions = {
disabledDate: date => {
let startTime = this.starttime ? new Date(this.starttime).valueOf() : '';
return date && (date.valueOf() < startTime);
}
}
},
//结束时间
endTimeChange: function(e) {
this.endtime = e;
let endTime = this.endtime ? new Date(this.endtime).valueOf() - 1 * 24 * 60 * 60 * 1000 : '';
this.startTimeOptions = {
disabledDate(date) {
return date && date.valueOf() > endTime;
}
}
},
}
}
表格及渲染函数渲染
HTML
<Table :columns="columnsTab" :data="dataTab"></Table>
JS
export default {
data () {
return {
columnsTab: [
{
title: 'Name',
key: 'name'
},
{
title: 'Age',
key: 'age'
},
{
title: 'Address',
key: 'address',
render: (h, params) => {
return h('div', [
h('Button', {
props: {
type: 'primary',
size: 'small'
},
style: {
marginRight: '5px'
},
on: {
click: () => {
this.show(params.index, params.row)
}
}
}, '编辑'),
h('Button', {
props: {
type: 'error',
size: 'small'
},
on: {
click: () => {
// 方法及传参
this.remove(params.index)
}
}
}, '删除')
]);
}
}
],
dataTab: []
}
},
mounted (){
this.onChange();
},
methods: {
onChange(){
let url = '接口地址';
this.$http.get(url).then(function(response){
if(response.status === 200){
this.$Message.success('加载成功');
// response.data 的json放入columnsTab的key
this.dataTab = response.data;
};
}, function () {
this.$Message.error('加载失败,请检查接口是否正常!');
// 失败回调
});
}
}
}
Vue.set() 响应式新增与修改数据
调用方法:Vue.set( target, key, value )
target:要更改的数据源(可以是对象或者数组)
key:要更改的具体数据
value :重新赋的值
取当前click的数据、删除当前元素的父元素的父元素 及 时间戳转换
html
<Row>
<Col span="8" v-for="(item,index) in cardList">
<Card>
<p>{{item.content}}</p>
<p>{{timestampToTime(item.changeTime)}}</p><!-- 时间戳转换调用 -->
<Button @click="deleteDiy(item,$event)" type="error">删除</Button>
</Card>
</Col>
</Row>
js
export default {
data() {
return {
cardList: [
{
changeTime: '1535612507000', //时间戳
content: '前端测试'
},
{
changeTime: '1535612507000',
content: '前端测试1'
},
{
changeTime: '1535612507000',
content: '前端测试2'
}
]
}
},
methods: {
// 转换时间戳
timestampToTime(timestamp) {
var date = new Date(timestamp*1000);//时间戳为10位需*1000,时间戳为13位的话不需乘1000
var Y = date.getFullYear() + '-';
var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
var D = date.getDate() + ' ';
var h = date.getHours() + ':';
var m = date.getMinutes() + ':';
var s = date.getSeconds();
return Y+M+D+h+m+s;
},
// 点击取值事件
deleteDiy(item,event){
let div = event.currentTarget.parentNode;//event获取当前元素父节点
div.parentNode.parentNode.removeChild(div.parentNode);//删除父节点的父节点
console.log(item) // 取当前点击的数据,index取索引
}
}
}