Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="//vuejs.org/js/vue.min.js"></script>
    <!-- import stylesheet -->
    <link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css">
    <!-- import iView -->
    <script src="//unpkg.com/iview/dist/iview.min.js"></script>
</head>
​
<body>
    <div id="app">
        <i-row style="padding:20px">
            <i-table :columns="columns" :data="data"></i-table>
        </i-row>
        <i-form ref='formDemo' :model="formItem" label-width="100">
            <form-item label="基本工资">
                <i-input v-model="formItem.basic" placeholder="请输入基本工资"></i-input>
            </form-item>
            <form-item label="绩效工资">
                <i-input v-model="formItem.pref" placeholder="请输入绩效工资"></i-input>
            </form-item>
            <form-item label="应发工资">
                <i-input v-model="formItem.should" placeholder="请输入应发工资"></i-input>
            </form-item>
            <i-button type="primary" @click="sureUpdate">确定</i-button>
        </i-form>
    </div>
</body>
<script>
    var vue = new Vue({
        el: '#app',
        data() {
            return {
                columns: [{
                        title: "基本工资",
                        key: "basic"
                    },
                    {
                        title: "绩效工资",
                        key: "pref"
                    },
                    {
                        title: "应发工资",
                        key: "should"
                    },
                    {
                        title: "操作",
                        key: "action",
                        align: "center",
                        render: (h, params) => {
                            return h(
                                "Button", {
                                    props: {
                                        type: '编辑',
                                        size: "small"
                                    },
                                    style: {
                                        marginRight: "5px"
                                    },
                                    on: {
                                        click: ($event) => {
                                            $event.stopImmediatePropagation();
                                            this.editForm(params)
                                        }
                                    }
                                },
                                '编辑'
                            )
                        }
                    }
                ],
                data: [{
                        basic: "1",
                        pref: "2",
                        should: "3"
                    },
                    {
                        basic: "4",
                        pref: "5",
                        should: "6"
                    }
                ],
                formItem: {},
                curIndex: 0
            }
        },
        methods: {
            editForm(data) {
                this.curIndex = data.index;
                for (let key in data.row) {
                    this.$set(this.formItem, key, data.row[key]);
                }
            },
            sureUpdate() {
                for(let key in this.formItem){
                    this.$set(this.data[this.curIndex],key,this.formItem[key]);
                }
            }
        },
        watch: {
            'formItem': {
                handler(val) {
                    if (val.basic && val.pref) {
                        val.should = Number(val.basic) + Number(val.pref);
                    }
                },
                deep: true
            }
        }
    })
</script>
​
</html>
 
​
 
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers