关于iview表格的增删改查的实例

这只是我的一个学习的demo

需求：在静态界面下实现表格的增删改查

界面完成的样式：

解析：我们的数据都放在数组list中，但是这里并不直接对list对循环输出，而是先把list中的数据给一个数组newlist，对newlist进行循环输出。因为我们在后面的查询功能中需要对数据进行过滤，数组list一直保存着原始数据（包括新增、修改后或已删除后），而数组slist只负责展示。

在vue中提供一个set newlist方法，将需要展示的数据给了数组newlist：

<template>

<div>

<div class="topBody">

<Form>

<Row>

<Col span="5">

<FormItem label="企业名称" class="mleft">

<Select style="width:230px;margin-bottom:20px;" v-model="companyName">

<Option value="乐山市公共交通总公司01">乐山市公共交通总公司01</Option>

<Option value="乐山市公共交通总公司02">乐山市公共交通总公司02</Option>

</Select>

</FormItem>

</Col>

<Col span="5">

<span class="input-label">车牌号码：</span>

<Input type="text" class="search"></Input>

</Col>

<Col span="14">

<FormItem>

<Button type="primary" @click="search">查询</Button>

<!-- <Button type="primary" style="margin-left:15px;">导出</Button> -->

<Button class="search-btn" type="primary" @click="addBus">

<Icon type="search"/>&nbsp;&nbsp;新增

</Button>

</FormItem>

</Col>

</Row>

</Form>

</div>

<div class="tableText">

<Table :columns="columns" :data="newList" border/>

</div>

 

<Modal

:title="modalTitle"

v-model="handleModal"

:footer-hide="true"

:mask-closable="false"

@on-visible-change="handleReset('formValidate')"

>

<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">

<FormItem label="企业名称" prop="name">

<Input v-model="formValidate.name" placeholder="请输入企业名称"></Input>

</FormItem>

<FormItem label="车牌号码" prop="carNumber">

<Input v-model="formValidate.carNumber" placeholder="请输入车牌号码"></Input>

</FormItem>

<FormItem>

<Button type="primary" @click="handleSubmit('formValidate')">提交</Button>

<Button @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>

</FormItem>

</Form>

</Modal>

</div>

</template>

<script>

import { getArrayFromFile, getTableDataFromArray } from '@/libs/util'

export default {

name: 'update_table_page',

data() {

return {

handleModal: false,

modalTitle: '',

newList:[],

companyName: '',

formValidate: {

name: '',

carNumber: ''

},

ruleValidate: {

name: [

{

required: true,

message: '企业名称不能为空',

trigger: 'blur'

}

],

carNumber: [

{

required: true,

message: '车牌号码不能为空',

trigger: 'blur'

}

]

},

columns: [

{

title: '编号',

type: 'index',

width: 60,

align: 'center'

},

{

title: '企业名称',

key: 'name'

},

{

title: '车牌号',

key: 'carNumber'

},

{

title: '操作',

key: 'action',

width: 150,

align: 'center',

render: (h, params) => {

return h('div', [

h(

'Button',

{

props: {

type: 'primary',

size: 'small'

},

style: {

marginRight: '5px'

},

on: {

click: () => {

this.editBus(params.row, params.index)

}

}

},

'编辑'

),

h(

'Button',

{

props: {

type: 'error',

size: 'small'

},

on: {

click: () => {

this.remove(params.index)

}

}

},

'删除'

)

])

}

}

],

tableData: [

{

name: '乐山市公共交通总公司01',

age: 18,

carNumber: '川L00001',

date: '2016-10-03'

},

{

name: '乐山市公共交通总公司02',

age: 24,

carNumber: '川L00002',

date: '2016-10-01'

}

]

}

},

//在判断与select下拉框的值对应后，查询到的新的数据数组用push的方法，添加到newlist里面

methods: {

search() {

var len = this.tableData

var arr = []

for (var i in len) {

if (len[i].name == this.companyName) {

arr.push(len[i])

} else if (this.companyName == '') {

this.newList = this.tableData

return

}

}

this.newList = arr

},

// 增加用户时使用push方法，把用户的信息添加到list数组的最后

addBus() {

this.handleModal = true

this.modalTitle = '新增'

},

editBus(item, index) {

this.handleModal = true

this.modalTitle = '修改'

this.itemIndex = index

this.formValidate = JSON.parse(JSON.stringify(item))

},

handleSubmit(name) {

var self = this

self.$refs[name].validate(valid => {

if (valid) {

var params = JSON.parse(JSON.stringify(self.formValidate))

if (self.modalTitle === '新增') {

// 获取需要渲染到页面中的数据

self.$Message.success('新增成功!')

self.newList.push(params)

} else {

// 获取需要渲染到页面中的数据

this.$set(self.newList, self.itemIndex, params)

self.$Message.success('修改成功!')

}

self.handleModal = false

} else {

if (self.modalTitle === '新增') {

self.$Message.error('新增失败!')

} else {

self.$Message.error('修改失败!')

}

}

})

},

handleReset(name) {

this.$refs[name].resetFields()

},

//删除用户时，通过splice(index, 1)，可以删除index位置的数据，页面上的数据自动就会更新

remove(index) {

this.newList.splice(index, 1)

}

},

mounted() {

this.newList = this.tableData

}

}

</script>

 

<style>

.handle-box {

text-align: right;

margin-bottom: 10px;

}

.topBody {

width: 100%;

background-color: #ffffff;

padding-top: 30px;

}

.tableText {

width: 100%;

}

.mleft {

margin-left: 10px;

}

.search-btn{

float:right;

margin-right: 10px;

}

.input-label {

display: inline-block;

line-height: 16px;

margin-right: 15px;

font-size: 16px;

}

.search {

width: 230px;

}

</style>

界面只完成了根据第一个条件，查询列表信息