vue實現表格自建與表格內容填寫
阿新 • • 發佈:2021-07-15
<template> <div> <el-dialog width="60%" title="任務詳情" :visible.sync="innerVisible" append-to-body> <el-table :data="$store.state.taskData" border style="width: 100%; margin-top: 20px"> <el-table-column prop="parent" label="業務領域" width="180"> </el-table-column> <el-table-column prop="taskName" label="任務名稱"> </el-table-column> <el-table-column prop="amount" label="人員"> </el-table-column> </el-table> <span slot="footer" class="dialog-footer"> <el-button @click="cancel">取 消</el-button> <el-button type="primary" @click="saveTask">確 定</el-button> </span> </el-dialog> </div> </template> <script> export default { props:{ person:String, taskData:Array }, methods: { saveTask(){this.innerVisible=false this.$emit('savetask') }, cancel(){ this.innerVisible=false }, objectSpanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0) { if (rowIndex % 2 === 0) { return { rowspan: 2, colspan: 1 }; } else { return { rowspan: 0, colspan: 0 }; } } } }, data(){ return { innerVisible:false, taskData:[], tableData: [] } }, mounted(){ } } </script> <style> </style>
實現思路