iview + table 插入input框并实现双向绑定

最新推荐文章于 2024-09-05 22:34:46 发布

就叫小黄好了鸭

最新推荐文章于 2024-09-05 22:34:46 发布

阅读量1.7k

点赞数 1

分类专栏：前端demo vue 文章标签： javascript vue iview

本文链接：https://blog.csdn.net/weixin_42365757/article/details/121247924

版权

vue 同时被 2 个专栏收录

23 篇文章 1 订阅

订阅专栏

前端demo

12 篇文章 0 订阅

订阅专栏

iview + table 插入input框

参考iview官网文档：iview官方文档

代码：

在这里插入图片描述

代码：

<template>
    <div>
        <Card>
            <Table  ref="table" editable :data="tableData" :columns="columns" stripe></Table>
        </Card>
    </div>
</template>

<script>
import { getProjectList, getDeploy } from '../../api/data'
export default {
  name: 'tables_page',
  data () {
    return {
      tableData: [], // 表格数据
      inputVal: '', // 输入框的值
      tempArr: [], // 勾选的数据
      columns: [
        { type: 'selection', width: 60, align: 'center' },
        { title: '序号',
          key: 'serialNumber',
          width: 150,
          align: 'center',
          render: (h, params) => {
            return h('Input', {
              props: {
                type: 'number',
                size: 'small',
                value: params.row.serialNumber
              },
              on: {
                input: (val) => {
                  this.inputVal = params.row.serialNumber = val
                }
              }
            })
          }
        },
        { title: '项目全称', key: 'jobFullName', sortable: true, align: 'center' }
      ]
    }
  },
  methods: {
    async init () {
      let res = await getProjectList()
      var temp = res.data.result.map(item => { // 改变初始数据
        return Object.assign({}, { id: item.id, jobFullName: item.jobFullName, serialNumber: this.inputVal })
      })
      this.tableData = temp // 等于改变后的数据
      console.log(this.tableData)
    }
  },
  mounted () {
    this.init()
  }
}
</script>