vue——template模板占位符常用的地方

---

一、在管理系统的项目中

想要渲染出这样的效果：



就需要在el-table-column标签中放上一个template标签了。
比如上面的用户列表：

<el-table-column label="用户列表" align="center" min-width="50px">  
  <template slot-scope="scope">  
    <div class="se-ellipsis">  
      <span v-for="(item, index) in scope.row.users" :key="index"  
        >{{ item }}  </span  
      >  
    </div>  
    <el-button size="mini" type="text" @click="handleSeeAll(scope.row)"  
      >查看全部</el-button  
    >  
  </template>  
</el-table-column>

---

状态：

<el-table-column label="状态" align="center">  
  <template slot-scope="scope">  
    <el-switch  
      v-model="scope.row.status"  
      active-value="0"  
      inactive-value="1"  
      @change="handleStatusChange(scope.row)"  
    ></el-switch>  
  </template>  
</el-table-column> 

---

操作：

<el-table-column label="操作" align="center" class-name="small-padding fixed-width">  
  <template>  
    <el-button  
      size="mini"  
      type="text"  
      icon="el-icon-delete"  
      @click="handleDelete(scope.row)"  
      v-hasPermi="['system:role:remove']"  
      >删除</el-button  
    >  
  </template>  
</el-table-column>  

template里面用slot-scope="scope"来渲染数据。

---

总结

后面将更新更多template用法。