求解呀,这到底什么情况,安装antd@2也不管用。下面有这个页面全部代码,有用一个table插件: https://xuliangzhan_admin.git...
编辑样式也没有渲染出来,
这是新增,当点过编辑报错以后我的新增再点击也会变成上面一样空的了。
js代码:
html
编辑
新增
data:
<template>
<div class="realData">
<!-- <a-form
:form="form"
:label-col="{ span: 5 }"
:wrapper-col="{ span: 12 }"
@submit="handleSubmit"
>
<a-form-item label="Note">
<a-input
v-decorator="[
'note',
{ rules: [{ required: true, message: 'Please input your note!' }] },
]"
/>
</a-form-item>
<a-form-item label="Gender">
<a-select
v-decorator="[
'gender',
{
rules: [
{ required: true, message: 'Please select your gender!' },
],
},
]"
placeholder="Select a option and change input text above"
@change="handleSelectChange"
>
<a-select-option value="male">
male
</a-select-option>
<a-select-option value="female">
female
</a-select-option>
</a-select>
</a-form-item>
<a-form-item :wrapper-col="{ span: 12, offset: 5 }">
<a-button type="primary" html-type="submit">
Submit
</a-button>
</a-form-item>
<a-checkbox-group
v-model="value"
name="checkboxgroup"
:options="plainOptions"
@change="onChange"
/>
<br />
<a-checkbox-group
:options="plainOptions"
:default-value="['Apple']"
@change="onChange"
/>
<br />
<a-checkbox-group
:options="options"
:value="['Pear']"
@change="onChange"
/>
<br />
<a-checkbox-group
:options="optionsWithDisabled"
disabled
:default-value="['Apple']"
@change="onChange"
>
<span slot="label" slot-scope="{ value }" >{{
value
}}</span>
</a-checkbox-group>
</a-form> -->
<vxe-toolbar export print custom>
<template v-slot:buttons>
<a-button @click="insertEvent">新增</a-button>
<a-button @click="saveEvent">保存</a-button>
<a-button @click="vaildEvent">校验</a-button>
<a-dropdown :trigger="['click']">
<a-button>操作<a-icon type="down"/></a-button>
<a-menu slot="overlay">
<a-menu-item key="0">
<a @click="dropdownMenuEvent('remove')">删除选中</a>
</a-menu-item>
<a-menu-item key="1">
<a @click="dropdownMenuEvent('export')">导出数据</a>
</a-menu-item>
<a-menu-divider />
</a-menu>
</a-dropdown>
</template>
</vxe-toolbar>
<vxe-table
border
resizable
row-key
keep-source
export-config
highlight-hover-row
ref="xTable"
width="100%"
height="528"
:loading="loading"
:data="dataSource">
<vxe-table-column type="checkbox" width="60" fixed="left"></vxe-table-column>
<vxe-table-column type="seq" title="排序" width="80" fixed="left"></vxe-table-column>
<vxe-table-column field="name" title="种类"></vxe-table-column>
<vxe-table-column field="number" title="数量"></vxe-table-column>
<vxe-table-column field="qualification" title="合格数"></vxe-table-column>
<vxe-table-column field="qualified" title="数据质量合格率"></vxe-table-column>
<vxe-table-column field="statisTime" title="统计时间"></vxe-table-column>
<vxe-table-column title="操作" fixed="right" width="120" show-overflow>
<template v-slot="{ row }">
<a @click="editEvent(row)">编辑</a>
<a @click="removeEvent(row)">删除</a>
</template>
</vxe-table-column>
</vxe-table>
<vxe-modal v-model="showEdit" :title="selectRow ? '编辑' : '新增'" width="800" min-width="600" min-height="300" :loading="submitLoading" resize destroy-on-close>
<template v-slot>
<a-form class="edit-form" :form="form" @submit="submitTable">
<a-row>
<a-col :span="12">
<a-form-model-item label="名称">
<a-input v-decorator="['name', { rules: [{ required: true, message: '请输入名称!' }] }]" placeholder="请输入名称" />
</a-form-model-item>
<a-form-model-item label="数量">
<a-input-number v-decorator="['number', { rules: [{ required: true, message: '请输入'}] }]" />
</a-form-model-item>
<a-form-model-item label="合格数">
<a-input-number v-decorator="['qualification', { rules: [{ required: true, message: '请输入合格数'}] }]" />
</a-form-model-item>
</a-col>
<a-col :span="12">
<a-form-model-item label="数据质量合格率">
<a-input v-decorator="['qualified', { rules: [{ required: true, pattern: /(^[1-9][0-9]$)|(^100&)|(^[1-9]$)$/, message: '请输入1-100以内的数字'}] }]" suffix="%" />
</a-form-model-item>
<a-form-item label="统计时间" has-feedback>
<a-date-picker
format="YYYY-MM-DD HH:mm:ss"
:mode="mode1"
v-decorator="['date-time-picker', config]"
show-time
@openChange="handleOpenChange1"
@panelChange="handlePanelChange1"
/>
</a-form-item>
</a-col>
</a-row>
<a-form-item class="submit-btn-box">
<a-button width="80" class="submit-btn" type="primary" html-type="submit">
提交
</a-button>
<a class="reset" @click='reset'>重置</a>
</a-form-item>
</a-form>
<!-- <vxe-form :data="formData" :items="formItems" :rules="formRules" title-align="right" title-width="100" @submit="submitEvent"></vxe-form> -->
</template>
</vxe-modal>
<a-pagination
@showSizeChange="handleSizeChange"
@change="handleCurrentChange"
v-model="tablePage.currentPage"
:page-size-options="['5', '10', '20', '50', '100']"
:page-size="tablePage.pageSize"
:total="tablePage.totalResult"
showSizeChanger
showQuickJumper
>
</a-pagination>
<!-- <a-button type="primary" @click="showDrawer"> <a-icon type="plus" /> New account </a-button> -->
</div>
</template>
<script>
import moment from 'moment';
const plainOptions = ["Apple", "Pear", "Orange"];
const options = [
{ label: "Apple", value: "Apple" },
{ label: "Pear", value: "Pear" },
{ label: "Orange", value: "Orange" },
];
const optionsWithDisabled = [
{ value: "Apple" },
{ label: "Pear", value: "Pear" },
{ label: "Orange", value: "Orange", disabled: false },
];
const dataSource = [
{
key: 1,
name: "John Brown sr.",
number: 12,
qualification: 45,
qualified: 48,
statisTime: '2020-09-15 12:15:45',
children: [
//这里我把子节点的key,改为qq了
{
key: 11,
name: "John Brown",
number: 12,
qualification: 45,
qualified: 48,
statisTime: '2020-09-15 12:15:45',
},
],
},
{
key: 2,
name: "Joe Black23",
number: 12,
qualification: 45,
qualified: 48,
statisTime: '2020-09-15 12:15:45',
},
{
key: 3,
name: "Joe Black",
number: 12,
qualification: 45,
qualified: 48,
statisTime: '2020-09-15 12:15:45',
},
{
key: 4,
name: "Joe Black234",
number: 12,
qualification: 45,
qualified: 48,
statisTime: '2020-09-15 12:15:45',
},
{
key: 5,
name: "Joe Black",
number: 12,
qualification: 45,
qualified: 48,
statisTime: '2020-09-15 12:15:45',
},
{
key: 6,
name: "Joe Black24222",
number: 12,
qualification: 45,
qualified: 48,
statisTime: '2020-09-15 12:15:45',
},
{
key: 7,
name: "Joe Black",
number: 12,
qualification: 45,
qualified: 48,
statisTime: '2020-09-15 12:15:45',
},
{
key: 8,
name: "Joe Black12412",
number: 12,
qualification: 45,
qualified: 48,
statisTime: '2020-09-15 12:15:45',
},
{
key: 9,
name: "Joe Black",
number: 12,
qualification: 45,
qualified: 48,
statisTime: '2020-09-15 12:15:45',
},
{
key: 10,
name: "Joe Black",
number: 12,
qualification: 45,
qualified: 48,
statisTime: '2020-09-15 12:15:45',
},
{
key: 11,
name: "Joe Black12412",
number: 12,
qualification: 45,
qualified: 48,
statisTime: '2020-09-15 12:15:45',
},
{
key: 12,
name: "Joe Black",
number: 12,
qualification: 45,
qualified: 48,
statisTime: '2020-09-15 12:15:45',
},
{
key: 13,
name: "Joe Black",
number: 12,
qualification: 45,
qualified: 48,
statisTime: '2020-09-15 12:15:45',
},
{
key: 14,
name: "Joe Black",
number: 12,
qualification: 45,
qualified: 48,
statisTime: '2020-09-15 12:15:45',
},
{
key: 15,
name: "Joe Black",
number: 12,
qualification: 45,
qualified: 48,
statisTime: '2020-09-15 12:15:45',
},
{
key: 16,
name: "Joe Black",
number: 12,
qualification: 45,
qualified: 48,
statisTime: '2020-09-15 12:15:45',
},
];
export default {
data() {
this.cacheData = dataSource.map((item) => ({ ...item })); //缓存所有数据
return {
plainOptions,
options,
optionsWithDisabled,
value: [],
dataSource,
// 新增/编辑
// form: {
// name: null,
// number: null,
// qualification: null,
// qualified: null,
// statisTime: null,
// },
form: this.$form.createForm(this, { name: 'coordinated' }),
formLayout: 'horizontal',
mode1: 'time',
mode2: ['month', 'month'],
value: [],
config: {
rules: [{ type: 'object', required: true, message: 'Please select time!' }],
},
selectRow: null,
submitLoading: false,
loading: false,
showEdit: false,
showStatus: false,
tableData: [],
validRules: {
name: [
{ required: true, message: "app.body.valid.rName" },
{ min: 3, max: 50, message: "名称长度在 3 到 50 个字符" },
],
sex: [{ required: true, message: "性别必须填写" }],
},
restaurants: ["前端", "后端", "开发", "测试"],
ACProps: {
dataSource: [],
},
sexList: [],
regionList: [],
sexGroupList: [
{
label: "分组1",
options: [
{
label: "男",
value: "1",
},
],
},
{
label: "分组2",
options: [
{
label: "女",
value: "0",
},
],
},
],
tablePage: {
currentPage: 1,
pageSize: 10,
totalResult: dataSource.length,
},
formData: {
name: "",
role: "",
sex: null,
age: null,
region: [],
date: null,
flag: false,
rate: 0,
flag1: "",
checkedList: [],
},
};
},
computed: {
rowSelection() {
const { selectedRowKeys } = this;
return {
selectedRowKeys,
onChange: this.onSelectChange,
hideDefaultSelections: true,
selections: [
{
key: "all-data",
text: "Select All Data",
onSelect: () => {
this.selectedRowKeys = [...Array(46).keys()]; // 0...45
},
},
{
key: "odd",
text: "Select Odd Row",
onSelect: (changableRowKeys) => {
let newSelectedRowKeys = [];
newSelectedRowKeys = changableRowKeys.filter((key, index) => {
if (index % 2 !== 0) {
return false;
}
return true;
});
this.selectedRowKeys = newSelectedRowKeys;
},
},
{
key: "even",
text: "Select Even Row",
onSelect: (changableRowKeys) => {
let newSelectedRowKeys = [];
newSelectedRowKeys = changableRowKeys.filter((key, index) => {
if (index % 2 !== 0) {
return true;
}
return false;
});
this.selectedRowKeys = newSelectedRowKeys;
},
},
{
key: "clear",
text: "Select clear Row",
onSelect: (changableRowKeys) => {
let newSelectedRowKeys = [];
newSelectedRowKeys = changableRowKeys.filter(() => {
// if (index % 2 !== 0) {
// return true;
// }
return false;
});
this.selectedRowKeys = newSelectedRowKeys;
},
},
],
onSelection: this.onSelection,
};
},
hasSelected() {
return this.selectedRowKeys.length > 0;
},
},
beforeCreate() {
// this.form = this.$form.createForm(this, { name: 'time_related_controls' });
},
created() {
this.findList();
this.findSexList();
this.findRegionList();
},
methods: {
moment,
// 编辑/新增时间选择
handleOpenChange1(open) {
if (open) {
this.mode1 = 'time';
}
},
handlePanelChange1(value, mode) {
this.mode1 = mode;
},
// 新增
insertEvent() {
this.selectRow = null
this.showEdit = true
},
// 编辑
editEvent(row) {
debugger
console.log(row)
this.form = {
name: row.name,
number: row.number,
qualification: row.qualification,
qualified: row.qualified,
statisTime: row.statisTime,
}
// this.form.validateFields((err, values) => {
// console.log(values)
// })
// this.form = row;
this.showEdit = true;
},
// 表单保存提交
submitTable(e) {
e.preventDefault();
this.form.validateFields((err, values) => {
const times = {
...values,
'statisTime': values['date-time-picker'].format('YYYY-MM-DD HH:mm:ss'),
};
console.log(times);
if (!err) {
console.log('Received values of form: ', values);
this.dataSource.push(times);
this.showEdit = false;
} else {
this.$message.warning("请确认数据是否正确");
}
});
},
// 表单保存重置
reset(){},
// onChange(checkedValues) {
// console.log("checked = ", checkedValues);
// console.log("value = ", this.value);
// },
findList() {
// this.loading = true;
// XEAjax.get(
// `/api/user/page/list/${this.tablePage.pageSize}/${this.tablePage.currentPage}`,
// this.formData
// )
// .then(({ page, result }) => {
// this.tableData = result;
// this.tablePage.totalResult = page.totalResult;
// this.loading = false;
// })
// .catch((e) => {
// this.loading = false;
// });
},
findSexList() {
// return XEAjax.get("/api/conf/sex/list").then((data) => {
// this.sexList = data;
// return data;
// });
},
findRegionList() {
// return XEAjax.get("/api/conf/region/list").then((data) => {
// this.regionList = data;
// return data;
// });
},
submitEvent () {
// this.submitLoading = true
// setTimeout(() => {
// // this.submitLoading = false
// this.showEdit = false
// if (this.selectRow) {
// this.$message.success("保存成功!");
// // Object.assign(this.selectRow, this.formData)
// } else {
// this.$message.success("新增成功!");
// this.$refs.xTable.insert(this.formData)
// }
// }, 500)
},
// 单个删除数据
removeEvent (row) {
this.$XModal.confirm('您确定要删除该数据?').then(type => {
if (type === 'confirm') {
this.$refs.xTable.remove(row)
}
})
},
// 保存
saveEvent() {
let {
insertRecords,
removeRecords,
updateRecords,
} = this.$refs.xTable.getRecordset();
if (
insertRecords.length ||
removeRecords.length ||
updateRecords.length
) {
this.$message.success("保存成功!");
this.searchEvent();
} else {
this.$message.warning("数据未改动!");
}
},
// 校验
vaildEvent() {
this.$refs.xTable.validate((errMap) => {
if (errMap) {
this.$XModal.message({ status: "error", message: "校验不通过!" });
} else {
this.$XModal.message({ status: "success", message: "校验成功!" });
}
});
},
// 操作,多个删除
dropdownMenuEvent(name) {
switch (name) {
case "remove": {
let selectRecords = this.$refs.xTable.getCheckboxRecords();
if (selectRecords.length) {
this.$refs.xTable.removeCheckboxRow();
} else {
this.$message.warning("请至少选择一条数据!");
}
break;
}
case "export": {
this.$refs.xTable.exportData();
break;
}
}
},
searchEvent() {
this.tablePage.currentPage = 1;
this.findList();
},
handleSizeChange(current, size) {
this.tablePage.pageSize = size;
this.searchEvent();
},
handleCurrentChange(page, pageSize) {
this.tablePage.currentPage = page;
this.findList();
},
// visibleMethod({ data }) {
// return data.flag1 === "Y";
// },
roleSearchEvent({ row }, value) {
this.ACProps.dataSource = this.restaurants.filter(
(option) =>
option.toUpperCase().indexOf((value || "").toUpperCase()) !== -1
);
},
},
};
</script>
<style lang="less" scoped>
.realData{
.vxe-toolbar{
height: auto;
#padding.topBot();
}
.ant-pagination{
#padding.top();
}
.edit-form {
#padding.topBot();
#padding.padding();
.ant-form-item {
display: flex;
}
.submit-btn-box {
display: flex;
justify-content: center;
padding-top: 40px;
box-sizing: border-box;
.submit-btn{
background-color: #colors[subTone];
border: 1px solid #colors[mainTone];
}
.reset {
display: inline-block;
margin-left: 20px;
height: 33px;
line-height: 33px;
#padding.leftRight();
border: 1px solid #colors[mainTone];
color: #colors[mainTone];
border-radius: 5px;
}
}
}
/deep/ .vxe-modal--header {
padding-left: 64px;
box-sizing: border-box;
text-align: center;
}
}
</style>