1. 程式人生 > 其它 >vue實現表格自建與表格內容填寫

vue實現表格自建與表格內容填寫

<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>

實現思路