简介
对于vue初学者，这个有肯定水平上的帮忙，逻辑比较简单，所以没什么正文，新增和编辑用的是页面路由跳转，this.$router.push，有问题能够私信我，共同进步。开始吧
<template>
<a-card>
<div :class="advanced ? 'search' : null"> <a-form-model layout="horizontal" :model="form" ref="ruleForm"> <div :class="advanced ? null : 'fold'"> <a-row> <a-col :md="8" :sm="24"> <a-form-model-item label="字典编号" v-model="form.id" :labelCol="{ span: 5 }" :wrapperCol="{ span: 18, offset: 1 }" prop="id" > <a-input placeholder="请输出" v-model="form.id" /> </a-form-model-item> </a-col> <a-col :md="8" :sm="24"> <a-form-model-item label="字典名称" v-model="form.dictName" :labelCol="{ span: 5 }" :wrapperCol="{ span: 18, offset: 1 }" prop="dictName" > <a-input placeholder="请输出" v-model="form.dictName" /> </a-form-model-item> </a-col> <a-col :md="8" :sm="24"> <a-form-model-item label="字典类型" :labelCol="{ span: 5 }" :wrapperCol="{ span: 18, offset: 1 }" prop="dictType" > <a-input style="width: 100%" placeholder="请输出" v-model="form.dictType" /> </a-form-model-item> </a-col> </a-row> <a-row v-if="advanced"> <a-col :md="8" :sm="24"> <a-form-model-item label="创立工夫" :labelCol="{ span: 5 }" :wrapperCol="{ span: 18, offset: 1 }" prop="createTime" > <a-range-picker v-model="form.createTime" style="width:100%"> </a-range-picker> </a-form-model-item> </a-col> <a-col :md="8" :sm="24"> <a-form-model-item label="字典状态" :labelCol="{ span: 5 }" :wrapperCol="{ span: 18, offset: 1 }" prop="status" > <a-select v-model="form.status" placeholder="请抉择"> <a-select-option value="1"> 失常 </a-select-option> <a-select-option value="0"> 停用 </a-select-option> </a-select> </a-form-model-item> </a-col> </a-row> </div> <span style="float: right; margin-top: 3px;"> <a-button type="primary" @click="query()">查问</a-button> <a-button style="margin-left: 8px" @click="reset" class="btn btn-default" type="default" >重置</a-button > </span> </a-form-model></div><div> <a-space class="operator"> <a-button @click="addNew" type="primary">新建</a-button> </a-space> <standard-table :pagination="{ total: totalCount, pageSize: 20,}" :columns="columns" :dataSource="dataSource" :rowKey="(record) => record.id" @change="pageNumberChange" > <div slot="action" slot-scope="{ record }"> <a style="margin-right: 8px" @click="register(record.id)"> <a-icon type="edit" />编辑 </a> <a @click="deleteRecord(record.id)"> <a-icon type="delete" />删除 </a> </div> <template slot="statusTitle" slot-scope="{ text }"> {{ text | changestatus }} </template> </standard-table></div></a-card>
</template>
<script>
import StandardTable from '@/components/table/StandardTable'
import axios from 'axios'
import moment from 'moment'
const columns = [
{
title: '字典编号',dataIndex: 'id',key: 'id',},
{
title: '字典名称',dataIndex: 'dictName',scopedSlots: { customRender: 'dictName' },key: 'dictName',},
{
title: '字典类型',dataIndex: 'dictType',key: 'dictType',},
{
title: '状态',dataIndex: 'status',needTotal: true,scopedSlots: { customRender: 'statusTitle' },key: 'status',},
{
title: '创立工夫',dataIndex: 'createTime',key: 'createTime',// defaultSortOrder: 'descend',sorter: (a, b) => { return a.createTime> b.createTime? 1 : -1 },},
{
title: '备注',dataIndex: 'remark',key: 'remark',},
{
title: '操作',scopedSlots: { customRender: 'action' },},
]
export default {
name: 'QueryList',
components: { StandardTable },
filters: {
changestatus(status){ if(status == '1'){ status = '失常' } else { status = '停用' } return status}},
mounted() {
this.init()},
data() {
return { form: {}, advanced: true, columns: columns, dataSource: [], expandedRowKeys: [], totalCount: 0, //总数居 dafaultcurrent: 1, //当前页 pages: '', pageSize: 20,}},
methods: {
pageNumberChange(page) { this.getPageList({page: page.current, size: page.pageSize})},getPageList(params){ let that = this axios .get('/api/admin/dict_type/list/page', { params:params, }) .then(function(response) { that.dataSource = response.data.data.list that.totalCount = response.data.data.totalCount }) .catch(function(error) { console.log(error) })},init() { this.getPageList()},query() { let searchlist = { ...this.form } if (searchlist.createTime && searchlist.createTime.length > 0) { let createTime1 = moment(searchlist.createTime[0]).valueOf() let createTime2 = moment(searchlist.createTime[1]).valueOf() searchlist.createTime = [createTime1,createTime2].join(',') } this.getPageList(searchlist)},reset() { this.$refs.ruleForm.resetFields() this.init()},register(id) { this.$router.push({ name: '新增数据', query: { id: id, }, })},deleteRecord(id) { let ids = [id].join(',') let that = this that.$confirm({ title: '提醒:确定要删除该数据嘛', content: '删除后不可复原aaa', okText: '确定', okType: 'danger', cancelText: '勾销', onOk() { axios .delete('/api/admin/dict_type/delete', { params: { ids } }) .then(function() { that.init() }) .catch(function(error) { console.log(error) }) }, onCancel() { //敞开提醒 }, })},addNew() { this.$router.push('/add')},},
}
</script>
完结
就是很简略，在这做一个记录吧，从零开始学做出第一个vue我的项目，还有有点成就感的，小白一个，不要喷