vue项目中涉及到的iview组件

1.input输入框

<Col :span="6">
  <FormItem label="姓名">
    <Input v-model="form.name"  placeholder="请输入"></Input>
  </FormItem>
</Col>

2.select选择框

// 如果是自己定义的list
<Col :span="6">
  <FormItem label="性别">
    <Select v-model="form.sex">
      <Option v-for="item in selectList" :value="item.key" :key="item.key" placeholder="请选择">
        {{ item.value }}
      </Option>
    </Select>
  </FormItem>
</Col>
// 在data中定义
selectList:[
{
key:'0',
value:'是'
}
{
key:'1',
value:'否'
}
]
// 如果是后端传来的接口
<Select  v-model="form.sfjscyjs" style="display:inline-block;">
  <Option v-for="item in selectList.whether" :value="item.code" :key="item.code" placeholder="请选择">
    {{ item.name }}
  </Option>
 </Select>
// 方法
selectListPromise (type, index) {
        // promise一样的请求地址只会请求一次，所以要拼接上时间和index
        const url = this.optionurl + `?time=${new Date().getTime()}${index}`
        return new Promise((resolve, reject) => {
          this.axios.post(this.optionurl, {
            type: type
          }).then(res => {
            resolve(res.data)
          }).catch((e) => {
          })
        })
      },
      getSelects () {
        const _codeList = ['status', 'pici', 'sex', 'zzmm', 'whether', 'xlxw', 'city', 'zyzg', 'bklb','mz', 'dwxz', 'change']
        let requestArr = []
        _codeList.forEach((_item, _index) => {
          requestArr.push(this.selectListPromise(_item, _index))
        })
        requestArr.map((promiseItem) => {
          return promiseItem.catch((err) => {
            return err
          })
        })
        Promise.all(requestArr).then((resultArr) => {
          _codeList.forEach((_item, _index) => {
            this.selectList[_item] = resultArr[_index]
          })
          console.log(this.selectList)
        }).catch((err) => {
          this.$Message.error(err)
        })
      }
// data中定义
selectList:[
zzmm:[],
whether:[]
]

3.日期

<Col :span="6">
  <FormItem label="出生日期:" >
    <DatePicker type="date" style="width:100%" v-model="form.birthday" placeholder="选择日期"></DatePicker>
  </FormItem>
</Col>

 4.tab标签

<Tabs value="name1">
  <TabPane label="标签一" name="name1">标签一的内容</TabPane>
  <TabPane label="标签二" name="name2">标签二的内容</TabPane>
  <TabPane label="标签三" name="name3">标签三的内容</TabPane>
</Tabs>

 5. table表格

<Table stripe  border ref="selection"  :columns="columns"  :data="tableData"></Table>

data () {
  return {
    columns: [
      {
        title: '姓名',
        resizable: true,
        align: 'center',
        name: 'name',
        tooltip: true,
        key: 'name'
      }
    ],
    tableData: [],
  }
}

6.分页功能

<div class="page">
  <Page :total="total" :current="page" :page-size="limit" show-sizer @on-change="pageChange" @on-page-size-change="pageSizeChange" show-elevator show-total/>
</div>

data () {
  return {
    page: 1, // 当前页数
    limit: 10 // 每页显示数
    total: 0, // 总页数
  }
}

methods: {
  // 分页
  pageChange (data) {
    this.page = data
    this.getTableDate()
  },
  pageSizeChange (size) {
    this.limit = size
    this.page = 1
    this.getTableData()
  }
}

7.modal确认框

// 是否签收
    signTask (row) {
      this.$Modal.confirm({
        title: '提示',
        content: '<p>确定签收吗</p>',
        onOk: () => {
          const url = `${window.zvconfig.url.taskClaim}?taskId=${row.id}`
          this.$axios.get(url).then(res => {
            if (res.data.status === '00000') {
              this.$Message.success('签收成功!')
              this.getTableData()
            } else {
              this.$Message.error(res.data.msg)
            }
          })
        },
        onCancel: () => {
          // this.$Message.info('Clicked cancel')
        }
      })
    },

8.带footer的modal

<Modal
  title="详情"
  v-model="detailModal"
  :mask-closable="false"
  @on-cancel="cancelModal"
  :transfer="false"
  fullscreen
  :footer-hide="true"
  >
<div style="height:100%">
  <Form ref="rwclForm" :model="rwclForm" :rules="rwclFormRules" :label-width="150">
    <Row>
      <Col span="6">
        <FormItem label="审批意见" >
          <Input type="text" :disabled="!canModify" v-model="rwclForm.comment"  placeholder="请输入">
          </Input>
        </FormItem>
      </Col>
    </Row>
   </Form>
   <div style="float: right;margin-right: 30px;margin-top: 100px;">
      <Button type="primary" style="margin-right:10px;" @click="sure">确认选择</Button>
      <Button type="primary" style="margin-right:10px;" @click="cancel">取消</Button>
    </div>
  </div>
</Modal>

9.modal的header

<p slot="header" style="text-align:center;height:24px">
  <span style="font-size:22px;font-weight:bold;">审核记录</span>
</p>

10.table的多选框、序号

// 多选框
{
  type: 'selection',
  width: 60,
  align: 'center'
},
// 序号
{
  type: 'index',
  width: 60,
  align: 'center'
},

11.table的slot插槽

{
title: '操作',
slot: 'action',
resizable: true,
name: 'action',
width: 110,
key: 'action'
},
{
title: '状态',
resizable: true,
tooltip: true,
name: 'status',
slot: 'status'
},

<Table class="columnsStyle" stripe  border ref="selection" :columns="tabledataColumns"  :data="tableData">
  <template slot-scope="{ row, index }" slot="action">
    <Button type="primary" ghost size="small" @click="detail(row, index)">详细</Button>
  </template>
  <template slot-scope="{ row, index }" slot="status">
    <span v-for="item in statusList" :key="item.key" v-show="row.status === item.key">{{item.value}}</span>
  </template>
</Table>