春节将至，iView 近期的一些更新

春节将至，iView 也带来了戊戌年最后的一些更新。

首先是上周更新的 3.2.2 版本，这个版本更新了近 20 项内容，主要解决核心版本 3.2 中 Select 组件的一些问题。3.2.2 版本是很是值得更新的，首先是 3.2 开始，Table 组件支持了 slot-scope 写法，也就说，在表格组件中自定义列模板，不用再使用 Render 函数了（固然 3.2 仍然是兼容 Render 的，并无废弃，因此不影响以前的代码）。好比一个修改当前行数据的示例，如今能够这样写：

<template>
  <Table :columns="columns" :data="data">
    <template slot-scope="{ row, index }" slot="name">
      <Input type="text" v-model="editName" v-if="editIndex === index" />
      <span v-else>{{ row.name }}</span>
    </template>

    <template slot-scope="{ row, index }" slot="age">
      <Input type="text" v-model="editAge" v-if="editIndex === index" />
      <span v-else>{{ row.age }}</span>
    </template>

    <template slot-scope="{ row, index }" slot="birthday">
      <Input type="text" v-model="editBirthday" v-if="editIndex === index" />
      <span v-else>{{ getBirthday(row.birthday) }}</span>
    </template>

    <template slot-scope="{ row, index }" slot="address">
      <Input type="text" v-model="editAddress" v-if="editIndex === index" />
      <span v-else>{{ row.address }}</span>
    </template>

    <template slot-scope="{ row, index }" slot="action">
      <div v-if="editIndex === index">
        <Button @click="handleSave(index)">保存</Button>
        <Button @click="editIndex = -1">取消</Button>
      </div>
      <div v-else>
        <Button @click="handleEdit(row, index)">操做</Button>
      </div>
    </template>
  </Table>
</template>
<script> export default { data () { return { columns: [ { title: '姓名', slot: 'name' }, { title: '年龄', slot: 'age' }, { title: '出生日期', slot: 'birthday' }, { title: '地址', slot: 'address' }, { title: '操做', slot: 'action' } ], data: [ { name: '王小明', age: 18, birthday: '919526400000', address: '北京市朝阳区芍药居' }, { name: '张小刚', age: 25, birthday: '696096000000', address: '北京市海淀区西二旗' }, { name: '李小红', age: 30, birthday: '563472000000', address: '上海市浦东新区世纪大道' }, { name: '周小伟', age: 26, birthday: '687024000000', address: '深圳市南山区深南大道' } ], editIndex: -1, // 当前聚焦的输入框的行数 editName: '', // 第一列输入框，固然聚焦的输入框的输入内容，与 data 分离避免重构的闪烁 editAge: '', // 第二列输入框 editBirthday: '', // 第三列输入框 editAddress: '', // 第四列输入框 } }, methods: { handleEdit (row, index) { this.editName = row.name; this.editAge = row.age; this.editAddress = row.address; this.editBirthday = row.birthday; this.editIndex = index; }, handleSave (index) { this.data[index].name = this.editName; this.data[index].age = this.editAge; this.data[index].birthday = this.editBirthday; this.data[index].address = this.editAddress; this.editIndex = -1; }, getBirthday (birthday) { const date = new Date(parseInt(birthday)); const year = date.getFullYear(); const month = date.getMonth() + 1; const day = date.getDate(); return `${year}-${month}-${day}`; } } } </script>
复制代码

这种写法要比 Render 更简单明了，也更符合 Vue.js 的语法。

3.2.2 版本是对 3.2 版本形成的一些问题修复，因此建议你们直接更新到最新的 3.2.2 版本。

除了 iView 组件库，iView 文档也作了一些更新。

1. 支持了从 iView Developer 一键受权登陆：

   

   登陆后，从 iView 文档就能够接收到通知，若是你是社区付费会员，还能够选择屏蔽赞助商广告。以后 iView 全部的生态产品，都将使用这样的一键受权登陆，好比 iView Run 也将集成登陆，这样用户就能够保存示例了。

2. 文档新增了提问题、写示例、提 Issues 的快捷入口：

   

3. 文档将额外的设置和社区信息整合到了一个抽屉里：

   

4. 如今文档中全部的示例，都支持直接在 iView Run 中打开了：

   

   iView Run 中的预览效果更接近一个 .vue 文件，相比 jsFiddle 要更简单操做，并且对于中国用户来讲，访问速度也是极快的，由于 iView 的主要服务都使用了全球 CDN 加速，几乎是秒开的。这些优质的体验会增长很多运营成本，但为了用户着想，是必需要支持的。

新年前 iView 不会再有版本更新了，不过立刻也会更新文档首页新春版（放心，咱们的组件库代码没有彩蛋！）。

最后，iView 预祝你们 2019 年快乐多一点，bug 少一点！