iview的tabe中加入input、select、时间插件和table的编辑、删除操作

最新推荐文章于 2021-06-01 19:44:55 发布

FLTmiao

最新推荐文章于 2021-06-01 19:44:55 发布

阅读量2.1k

点赞数

分类专栏： iview 文章标签： iview table input select date控件

本文链接：https://blog.csdn.net/flting1017/article/details/85257815

版权

本文介绍了如何在iview的表格中添加编辑功能，包括input输入框、select下拉框和日期选择器，并提供了详细的步骤和注意事项。通过设置编辑标记并处理输入焦点问题，实现了表格行的编辑和删除操作。完整示例可在github的demo中查看。

摘要由CSDN通过智能技术生成

如图，实现的目标table能有编辑的input、能选择的下拉框、还有日期选择器、最后的操作里面可以点击编辑和删除当前的行操作。

自己解说的，怕有些地方讲的不好，放上demo的链接地址

对应的github的demo链接地址：https://github.com/fengliting/iviewtable

1、第一步html

<template>
    <div style="width:80%;margin:50px auto">
        <Button @click="additem">添加</Button>
        <Table 
        class="margin-top-20"
        :loading="loading"
        :columns="columns" 
        :data="formList"
        size="small" 
        ref="table"  
        border 
        ></Table>
        <footer style="text-align:right;margin-top:10px">
            <Button type="primary" @click="submit">确定</Button>
            <Button @click="cancel">取消</Button>
        </footer>
    </div>
</template>

2、第二步js代码

a、定义table的data，还有选择的下拉框的option

data() {
      return {
          loading:false,
          datalist:[
              {
                  number:122333,
                  carrier:'aaa',
                  datatime:'2018-12-13 03:40:12'
              }
          ],
          Types:[