VUE批量删除和图片显示

一.VUE批量删除

 1. VUE批量删除的复选框我们可以在element-ui里直接复制,有一个关键点是在有复选框的表格最外层有一个方法

@selection-change="handleSelectionChange"

方法我们可以改一下

handleSelectionChange(val) {

      for (let index = 0; index < val.length; index++) {

        this.ids.push(val[index].ZhuDId);

      }

这个就是我们把获取的复选框的值循环输入到ids数组中

2. 后台的代码也需要改一下

//批删
public int DelAll(string ids)
{
var item = db.BugModel.Where(u => ids.Contains(u.Bid.ToString()));
db.BugModel.RemoveRange(item);
return db.SaveChanges();
}

这个地方呢我们使用一个反向包含的方式找出的对应的数据,然后直接删除数组

//批量修改状态
public int UpAll(string ids)
{
var item = db.BugModel.Where(u => ids.Contains(u.Bid.ToString()));
foreach (var list in item)
{
list.BState = true;
}
return db.SaveChanges();
}

批量修改状态就是把这个数组循环然后找出对应的列修改就可以了

二.图片显示

1. 首先在表格里我们要写一个插槽,这个插槽可以参考按钮的插槽,代码如下

 

<el-table-column label="描述文档" show-overflow-tooltip>

          <template  slot-scope="scope">

                               <img :src="scope.row.BImage" width="100" height="100" alt="">

                           </template>

        </el-table-column>

2.其次我们要在后台里改一下我们查询出来的字段

/// <summary>
/// 报错图片
/// </summary>
public string BImage { get; set; }
public string SubBImage => "http://localhost:52024/Images/" + BImage;

以上就可以完成图片显示了