简介
对于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项目，还有有点成就感的，小白一个，不要喷