iview Tabel支持slot-scope

忘是亡心i 2022-04-08 14:43 209阅读 0赞

原文章链接地址：[https://www.oschina.net/news/102807/iview-3-2-0-released][https_www.oschina.net_news_102807_iview-3-2-0-released]

示例地址：[https://run.iviewui.com/50ahQHrs][https_run.iviewui.com_50ahQHrs]

示例图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xoanVlamlhbmc_size_16_color_FFFFFF_t_70][]

实现代码：

<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>

[https_www.oschina.net_news_102807_iview-3-2-0-released]: https://www.oschina.net/news/102807/iview-3-2-0-released
[https_run.iviewui.com_50ahQHrs]: https://run.iviewui.com/50ahQHrs
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xoanVlamlhbmc_size_16_color_FFFFFF_t_70]: /images/20220404/06db09a2469c4d77900e2d5e0d58e4b0.png