实现常用table表格功能

显示开发

修改src/page/table.vue页面为

<template>
<div class="layout-content">
        <div class="layout-content-main">
            <Form :model="queryItem" >
                <div class="content-div">
                    <Row style="margin-bottom:5px;">
                        <Col span="6" class="table-form-input-select-col">
                            <Input v-model="queryItem.name" placeholder="姓名" ></Input>
                        </Col>
                        <Col span="6" class="table-form-input-select-col">
                            <Input v-model="queryItem.email" placeholder="邮箱" ></Input>
                        </Col>
                        <Col span="6" class="table-form-input-select-col">
                            <Select v-model="queryItem.address" placeholder="省份">
                                <Option value="beijing">北京市</Option>
                                <Option value="shanghai">上海市</Option>
                                <Option value="shenzhen">深圳市</Option>
                            </Select>
                        </Col>
                        <Col span="6" class="table-form-input-select-col">
                            <Input v-model="queryItem.mobile" placeholder="手机号" ></Input>
                        </Col>
                    </Row>
                    <Row style="margin-bottom:5px;">
                        <Col span="6" class="table-form-input-select-col">
                            <Input v-model="queryItem.userId" placeholder="用户id" ></Input>
                        </Col>
                        <Col span="6" class="table-form-input-select-col" order="4" >
                            <Button type="primary" shape="circle" icon="ios-search" size="large" @click="getData">查询</Button>
                        </Col>
                    </Row>
                </div>
            </Form>
            <hr class="hr1" />
            <div class="content-div">
                <Table  border :columns="columns2" :data="data"></Table>
            </div>
            <div class="content-div" align="center">
                <Page @on-change="getData()" :total="pageData.total" :current="pageData.current" :page-size="pageData.pageSize" style="padding:5px 5px 2px 5px;" show-elevator></Page>
            </div>
</div>
</div>
</template>
<script>
  export default {
    data () {
      return {
        showDataModalObject: {},
        editDataModalObject: {},
        showDataModalFlag: false,
        editDataModalFlag: false,
        queryItem: {
          name: '',
          email: '',
          address: '',
          mobile: '',
          userId: ''
        },
        columns2: [
          {
            title: '姓名',
            key: 'name',
            width: 100
          },
          {
            title: '年龄',
            key: 'age',
            width: 100
          },
          {
            title: '省份',
            key: 'province',
            width: 100
          },
          {
            title: '市区',
            key: 'city',
            width: 100
          },
          {
            title: '地址',
            key: 'address'
          },
          {
            title: '邮编',
            key: 'zip',
            width: 100
          },
          {
            title: '操作',
            key: 'action',
            width: 200,
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'info',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.showData(params.index)
                    }
                  }
                }, '查看'),
                h('Button', {
                  props: {
                    type: 'info',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.editData(params.index)
                    }
                  }
                }, '编辑'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.removeData(params.index)
                    }
                  }
                }, '删除')
              ])
            }
          }
        ],
        data: [
        ],
        pageData: {
          current: 1,
          total: 0,
          pageSize: 10
        }
      }
    },
    created () {
    },
    methods: {

    }
  }
</script>

并在src/style/style.scss添加相关的css内容

.layout-content-main{
    padding: 10px;
}
.hr1{
    height:1px;
    border:none;
    border-top:1px solid #dddee1;
    padding-top:5px;
    padding-bottom:5px;
}
.table-form-input-select-col{
    padding:2px 5px 2px 5px;
}
.content-div{
    margin-bottom:5px;
}

在table.vue中我们又用到了两个组件分别是表格Table和分页Page,
Table组件中columns属性描述表头,数据中对应名称为columns2的json数组,title为表格中文名称,key为对应字段的编码,width为对应列的宽度;data属性为表格的内容数据的json数组,数组中每个item的key和column中的key对应。在操作列的数据中属性render支持动态js添加内容,这里通过该方法在每行数据的”操作”列添加”查看”,”编辑”和”删除”按钮,并注册click方法事件。
Page组件为分页组件,常用属性为total:总行数,current:当前页号,page-size:每页容量

添加默认加载数据功能

在js代码中,存在一个空的created方法,这个方法中的代码会在页面加载完成后执行,所以可以在这个方法中添加首页数据加载的功能。
实现getData方法获取数据,

    created () {
      this.getData()
    },
    methods: {
      getData () {
        var self = this
        self.$api.get('/api/v1/table_data', null, function (result) {
          self.data = result.resultData.dataList
          self.pageData = result.resultData.pageData
        })
      },
    }

在分页组件中点击页面也需要加载数据,因此把getData添加到methods中。
mock链接/api/v1/table_data

Mock.mock('http://sunhaojie.com.test/api/v1/table_data', 'get', {
  'status': 200,
  'errorCode': 'SUCCESS',
  'message': '操作成功',
  'timestamp': '2017-10-17 12:12:12',
  'path': '/api/post',
  'method': null,
  'requestId': null,
  'resultData': {
    'pageData': {
      current: 2,
      total: 100,
      pageSize: 10
    },
    'dataList':
    [
      {
        name: '王小明',
        age: 18,
        address: '北京市朝阳区芍药居',
        province: '北京市',
        city: '朝阳区',
        zip: 100000
      },
      {
        name: '张小刚',
        age: 25,
        address: '北京市海淀区西二旗',
        province: '北京市',
        city: '海淀区',
        zip: 100000
      },
      {
        name: '李小红',
        age: 30,
        address: '上海市浦东新区世纪大道',
        province: '上海市',
        city: '浦东新区',
        zip: 100000
      },
      {
        name: '周小伟',
        age: 26,
        address: '深圳市南山区深南大道',
        province: '广东',
        city: '南山区',
        zip: 100000
      },
      {
        name: '王小明',
        age: 18,
        address: '北京市朝阳区芍药居',
        province: '北京市',
        city: '朝阳区',
        zip: 100000
      },
      {
        name: '张小刚',
        age: 25,
        address: '北京市海淀区西二旗',
        province: '北京市',
        city: '海淀区',
        zip: 100000
      },
      {
        name: '李小红',
        age: 30,
        address: '上海市浦东新区世纪大道',
        province: '上海市',
        city: '浦东新区',
        zip: 100000
      },
      {
        name: '周小伟',
        age: 26,
        address: '深圳市南山区深南大道',
        province: '广东',
        city: '南山区',
        zip: 100000
      }
    ]
  },
  'subErrors': null
})

页面样式如下:

8

添加查看功能

iview提供了Modal 对话框,支持当前页查看编辑;
在Page组件所在div下方添加以下内容,

<div>
    <Modal v-model="showDataModalFlag" title="查看详情">
        <p class="content-table-modal-show-p">姓名: {{showDataModalObject.name}}</p>
        <p class="content-table-modal-show-p">年龄: {{showDataModalObject.age}}</p>
        <p class="content-table-modal-show-p">省份: {{showDataModalObject.province}}</p>
        <p class="content-table-modal-show-p">市区: {{showDataModalObject.city}}</p>
        <p class="content-table-modal-show-p">地址: {{showDataModalObject.address}}</p>
        <p class="content-table-modal-show-p">邮编: {{showDataModalObject.zip}}</p>
    </Modal>
</div>

这里使用了两个数据showDataModalFlag对话框的展示开关,showDataModalObject显示数据json对象,添加到js的data()方法中。

showDataModalFlag: false,
showDataModalObject: {},

回顾table.vue页面,发现我们已经把showData方法注册到了查看按钮上,因此这里我们添加该方法,用于控制showDataModalFlag和showDataModalObject数据,通过vue展现到页面中。具体功能如下:

showData (index) {
  var self = this
  self.showDataModalFlag = true
  self.showDataModalObject = self.data[index]
}

为提高页面的美观性,在src/style/style.scss中添加代码:

.content-table-modal-show-p{
    font-size:24px;
}

增加编辑功能

在查看Modal下添加代码:

<Modal v-model="editDataModalFlag" title="编辑详情" @on-ok="doEditData">
    <Form :model="editDataModalObject" :label-width="100" >
        <FormItem label="姓名">
            <Input v-model="editDataModalObject.name" placeholder="请输入" class="input-select-class"></Input>
        </FormItem>
        <FormItem label="年龄">
            <Input v-model="editDataModalObject.age" placeholder="请输入" class="input-select-class"></Input>
        </FormItem>
        <FormItem label="省份">
            <Select v-model="editDataModalObject.province" placeholder="请选择" class="input-select-class">
                <Option value="北京市">北京市</Option>
                <Option value="上海市">上海市</Option>
                <Option value="广东">广东</Option>
            </Select>
        </FormItem>
        <FormItem label="市区">
            <Input v-model="editDataModalObject.city" placeholder="请输入" class="input-select-class"></Input>
        </FormItem>
        <FormItem label="地址">
            <Input v-model="editDataModalObject.address" placeholder="请输入" class="input-select-class"></Input>
        </FormItem>
        <FormItem label="邮编">
            <Input v-model="editDataModalObject.zip" placeholder="请输入" class="input-select-class"></Input>
        </FormItem>
    </Form>
</Modal>

增加Modal需要的数据

editDataModalFlag: false,
editDataModalObject: {},

在methods中添加方法

editData (index) {
  var self = this
  self.editDataModalFlag = true
  self.editDataModalObject = self.data[index]
}

9

在编辑对话框中点击确定会提交编辑的form表单,因此添加确定按钮的方法如下

doEditData () {
  var self = this
  self.$api.post('/api/v1/edit', self.editDataModalObject, function (result) {
    self.$Message.info(result.message)
  })
}

并在mock.js中添加模拟方法

Mock.mock('http://dami.ksyun.com.test/api/v1/edit', 'post', {
  'status': 200,
  'errorCode': 'SUCCESS',
  'message': '操作成功',
  'timestamp': '2017-10-17 12:12:12',
  'path': '/api/post',
  'method': null,
  'requestId': null,
  'resultData': null,
  'subErrors': null
})

增加删除功能

methods添加removeData方法

removeData (index) {
  var self = this
  self.$api.post('/api/v1/edit', self.data[index], function (result) {
    self.data.splice(index, 1)
    self.$Message.info(result.message)
  })
}

mock.js中添加删除的模拟方法

Mock.mock('http://dami.ksyun.com.test/api/v1/delete', 'post', {
  'status': 200,
  'errorCode': 'SUCCESS',
  'message': '操作成功',
  'timestamp': '2017-10-17 12:12:12',
  'path': '/api/post',
  'method': null,
  'requestId': null,
  'resultData': null,
  'subErrors': null
})

到这里我们使用webpack+vue+iview实现了两个常用的页面:form表单和table表格,通过开发这两个页面,应该可以掌握webpack,vue,iview组件等技术,掌握前端的开发模式和方法,并熟悉vue的语法和iview的常用标签;同时也可以以两个为蓝本实现其他的页面。

文中代码下载地址:
https://github.com/sunhj000/test_demo test_demo
https://github.com/sunhj000/test_admin test_admin
参考文档:
https://cn.vuejs.org/ vue.js官方网站
https://www.iviewui.com/ iview官方网站