Vue+ElementUI項目筆記(三、ElementUI表格)

模板

<template>
    <div class="record">
        <el-table :data="tableData" style="width: 100%" align='center'>
            <el-table-column label="序號" align='center' >
                <template slot-scope="scope">
                    <div slot="reference" >
                        <p>{{ scope.row.sub_num }}</p>
                    </div>
                </template>
            </el-table-column>
             <!-- 調用接口數據的下拉菜單-->
            <el-table-column label="狀態" property="status" align='center'>
                <template slot-scope="scope">
                    <el-select v-model="form.status" size="medium">
                        <el-option label="" v-for="item in status_name"                              placeholder=''"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </template>
            </el-table-column><el-table-column label="內容" property="content" align='center'>
                <template slot-scope="scope">
                    <div slot="reference" >
         <!-- @keyup.enter.native鍵盤事件:回車  -->
                        <el-input size="medium" v-model="scope.row.content" ref='content' @keyup.enter.native="add(scope.$index,scope.row)"></el-input>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="人員" property="person" align='center'>
                <template slot-scope="scope">
                    <div slot="reference" >
                        <p>管理員</p>
                    </div>
                </template>
            </el-table-column>
            <el-table-column property="enter_data" label="日期" align='center'>
        </el-table-column>
            <el-table-column label="操作" align='center'>
              <template slot-scope="scope">
                     <!--  @click點擊事件  -->
                <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">刪除</el-button>
              </template>
            </el-table-column>
        </el-table>
        <div class="button">
            <el-button type="success">保存</el-button>
        </div>
    </div>
</div></template>

交互

    <script>
          調用接口
          import {searchServiceState} from '../../service'
          export default {
               name: 'Home',
               data() {
                 return {
                       tableData:[],
                       type:'"",
                       status_name:[]
                    }
              },
mounted() {
    this.type = this.$route.params.type
    searchServiceState({type:0,order_type:this.type==='main' ? 0:1}).then((res) =>{
        this.status_name= res.data.data.map(item => {
            console.log(item.name);
            return {value: item.name, label: item.name}
        })
    })
},
methods: {
    handleDelete(index, row) {
                console.log(row);
                    判斷當前數據的長度大于1 && 當前數據不是最后一條數據
        if(this.tableData.length > 1 && index != this.tableData.length-1){
                  this.tableData.splice(index, 1);
                };
       },
    回車后添加一條數據
    add:function(index, row){
        // console.log(this.tableData.length-1);
                    判斷如果是最后一條數據,則添加
        if(index == this.tableData.length-1){
            row.sub_num = "";
            this.tableData.push(
                {
                    sub_num:'輸入',
                    status: '',
                    content: '',
                    person: '',
                    enter_data: '',
                }
              )
            }           
          }
       }
    }
</script>
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容