vue+elementui实现二级评论样式

Question

使用技术vue+饿了吗实现一个二级评论功能，可以使用的组件有哪些，最好有dome

Answer 1

使用Vue和ElementUI实现二级评论样式，可以使用的组件有：ElCollapse、ElCollapseItem、ElButton、ElCheckbox、ElInput、ElDialog。下面是一个示例代码：

// template 
<el-collapse v-model="activeNames">
 <el-collapse-item v-for="(comment,index) in comments" :key="index" :title="comment.name" name="1">
   <el-button @click="handleComment()">评论</el-button>
   <el-input v-show="show" placeholder="请输入评论内容"></el-input>
   <el-checkbox v-model="comment.checked">回复 Ta</el-checkbox>
   <el-dialog :visible.sync="dialogVisible" width="30%">
     <span>确定要提交吗？</span>
     <span slot="footer" class="dialog-footer">
       <el-button @click="dialogVisible = false">取 消</el-button>
       <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
     </span>
   </el-dialog>
 </el-collapse-item>
</el-collapse>

//js
export default {
 data() {
   return {
     activeNames: ["1"],
     comments: [{
       name: '',
       checked: false
     }],
     show: false,
     dialogVisible: false
   }
 },
 methods: {
   handleComment() {
     this.show = true;
   }
 }
}