|
1.安装个插件moment.js
npm install moment@2.24.0
2.main.js文件里面引用
import Moment from 'moment';
Vue.prototype.moment = Moment;//引用时间控件
3.页面里面使用
<template>
<div class="app-container">
<div style="text-align: right">
<label>家系号</label>
<el-input
type="text"
v-model="FamilyNumber"
style="width: 180px; margin-right: 10px"
/>
<el-button type="primary" @click="addrow(list)">新建行</el-button>
</div>
<el-table
v-loading="listLoading"
:data="list.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
element-loading-text="Loading"
border
fit
highlight-current-row
header-cell-style="color:#909399;font-weight:bold;"
>
<el-table-column prop="CollectionTime" label="收集时间" align="center">
<template scope="scope">
<el-date-picker
v-model="scope.row.CollectionTime"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择日期时间"
size="mini"
></el-date-picker>
</template>
</el-table-column>
<el-table-column prop="TubesNumber" label="管号" align="center">
<template scope="scope">
<el-input
type="text"
oninput="value=value.replace(/[^\d]/g,'')"
maxlength="9"
v-model="scope.row.TubesNumber"
placeholder=""
clearable
size="mini"
></el-input>
</template>
</el-table-column>
<el-table-column label="操作" align="center" min-width="100px">
<template slot-scope="scope">
<el-button
type="primary"
icon="el-icon-edit"
@click="addrow(list)"
circle
size="mini"
></el-button>
<el-button
type="danger"
icon="el-icon-delete"
@click="delRow(scope.$index, list)"
circle
size="mini"
></el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
layout="prev, pager, next, sizes, total, jumper"
:page-sizes="[5, 10, 20, 100]"
:page-size="pageSize"
:total="list.length"
:current-page.sync="currentPage"
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
style="text-align: center; margin-top: 1%"
></el-pagination>
</div>
</template>
<script>
import {
GetListClinicalFamilySamples,
remove,
AddTransaction,
} from "@/api/ClinicalFamilySamples";
import { GetFamilyMembersCondition } from "@/api/FamilyMembers";
import { mapGetters } from "vuex";
export default {
filters: {},
data() {
return {
list: [],
listLoading: true,
FamilyNumber: "",
pageSize: 20,
currentPage: 1,
};
},
mounted() {},
methods: {
handleCurrentChange: function (cpage) {
this.$data.currentPage = cpage;
},
handleSizeChange: function (psize) {
this.$data.pageSize = psize;
},
addrow(tableData, event) {
tableData.push({
CollectionTime: this.moment(new Date())
.utcOffset(480)
.format("YYYY-MM-DD HH:mm:ss"),
});
},
delRow(index, rows) {
rows.splice(index, 1);
},
},
};
</script>
<style scoped>
.el-table >>> td,
.el-table >>> th {
padding: 0px;
}
</style>
|
