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

 

如图，实现的目标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:[