基于webpack+vue2+iview技术管理后台简明开发教程(四)

    实现常用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官方网站

    转载请注明:孙豪杰的博客 » 基于webpack+vue2+iview技术管理后台简明开发教程(四)

    喜欢 0
上一篇: 已是最新文章