VUE 및 Element UI로 테이블 인라인 편집 가능-JS 튜토리얼-php.cn

VUE 및 Element UI로 테이블 인라인 편집 가능

php中世界最好的语言

풀어 주다： 2018-03-12 11:27:06

원래의

8878명이 탐색했습니다.

이번에는 테이블 내부 편집을 위한 VUE와 Element UI를 소개하겠습니다. 테이블 내부 편집을 위한 VUE와 Element UI 사용 시 주의사항은 무엇인가요?

VUE 및 Element UI로 테이블 인라인 편집 가능

demo

Css를 통해 바인딩된 입력 컨트롤과 값을 표시하는 것을 원칙으로 하며, 선택한 행 스타일로 컨트롤을 숨기거나 표시합니다

<!DOCTYPE html><html><head>
    <meta charset="UTF-8">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">
    <style>
        * {    margin: 0;    padding: 0}body {    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;    overflow: auto;    font-weight: 400;    -webkit-font-smoothing: antialiased;
}.tb-edit .el-input {    display: none
}.tb-edit .current-row .el-input {    display: block
}.tb-edit .current-row .el-input+span {    display: none
}    </style></head><body>
    <div id="app">
        <el-table :data="tableData" class="tb-edit" style="width: 100%" highlight-current-row @row-click="handleCurrentChange">
            <el-table-column label="日期" width="180">
                <template scope="scope">
                    <el-input size="small" v-model="scope.row.date" placeholder="请输入内容" @change="handleEdit(scope.$index, scope.row)"></el-input> <span>{{scope.row.date}}</span>
                </template>
            </el-table-column>
            <el-table-column label="姓名" width="180">
                <template scope="scope">
                    <el-input size="small" v-model="scope.row.name" placeholder="请输入内容" @change="handleEdit(scope.$index, scope.row)"></el-input> <span>{{scope.row.name}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="address" label="地址">
                <template scope="scope">
                    <el-input size="small" v-model="scope.row.address" placeholder="请输入内容" @change="handleEdit(scope.$index, scope.row)"></el-input> <span>{{scope.row.address}}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template scope="scope">
                    <!--<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>-->
                    <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <br>数据:{{tableData}}</div></body><script src="https://unpkg.com/vue/dist/vue.js"></script><script src="https://unpkg.com/element-ui/lib/index.js"></script><script>
    var app = new Vue({        el: &#39;#app&#39;,        data: {            tableData: [{                date: &#39;2016-05-02&#39;,                name: &#39;王小虎&#39;,                address: &#39;上海市普陀区金沙江路 1518 弄&#39;
            }, {                date: &#39;2016-05-04&#39;,                name: &#39;王小虎&#39;,                address: &#39;上海市普陀区金沙江路 1517 弄&#39;
            }, {                date: &#39;2016-05-01&#39;,                name: &#39;王小虎&#39;,                address: &#39;上海市普陀区金沙江路 1519 弄&#39;
            }, {                date: &#39;2016-05-03&#39;,                name: &#39;王小虎&#39;,                address: &#39;上海市普陀区金沙江路 1516 弄&#39;
            }]
        },        methods: {
            handleCurrentChange(row, event, column) {                console.log(row, event, column, event.currentTarget)
            },
            handleEdit(index, row) {                console.log(index, row);
            },
            handleDelete(index, row) {                console.log(index, row);
            }
        }
    })</script> </html>

로그인 후 복사

여기서 사례를 읽으신 후 방법을 익히셨으리라 믿습니다. 기사, 그리고 더 흥미로운 내용이 있을 것입니다. PHP 중국어 웹사이트에서 다른 관련 기사도 주목해 주세요!