iview table增加一行减少一行_ElementUI中的el-table中实现动态添加一行、删除一行、清空所有行...

场景

效果如下

注：

实现

首先页面添加一个el-table,然后绑定其数据源为bcglXiangXiList，

并且通过

添加了勾选框。

然后通过@selection-change="handleDetailSelectionChange设置其勾选框改变事件。

这里的数据源bcglXiangXiList要提前声明

data() {return{//详细list

bcglXiangXiList: [],

这里的每一列是不同的控件，但是最终都要有v-mode进行动态数据绑定。

v-loading="loading":data="bcglXiangXiList":row-class-name="rowClassName"@selection-change="handleDetailSelectionChange"

ref="tb"

>

format="HH:mm"value-format="HH:mm":style="{width: '100%'}"start-placeholder="开始时间"end-placeholder="结束时间"range-separator="至"clearable

@change="changesjfw(scope.row)"v-model="bcglXia