zoukankan      html  css  js  c++  java
  • iview 表格可编辑

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">
        <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
        <script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>
    </head>
    <body>
     
    <div id="app">
        <i-table border :columns="columns2" :data="data3"></i-table>
    </div>
     
    <script>
        
        var app = new Vue({
            el: '#app',
            data () {
                return {
                        columns2: [
                            {
                                 60,
                                align: 'center',
                                render: (h, params) => {
                                    return h('Checkbox', {
                                        props: {
                                            value: params.row.$isEdit,
                                        },
                                        on: {
                                            'on-change': function (state) {
                                                console.log(state);
    //不用iview table自带的CheckBox 自己重构一个 点击赋值
    params.row.$isEdit = state } } }); } }, { title: 'Name', key: 'name' }, { title: 'Age', key: 'age', render: (h, params) => { if (params.row.$isEdit) { return h('input', { domProps: { value: params.row.age }, on: { input: function (event) { params.row.age = event.target.value } } }); } else { return h('div', params.row.age); } } }, { title: 'Address', key: 'address' }, { title: 'Action', key: 'action', render: (h, params) => { return h('Button', { props: { type: 'text', size: 'small' }, on: { click: () => { if (params.row.$isEdit) { this.handleSave(params.row) } else { this.handleEdit(params.row) } } } }, params.row.$isEdit ? '保存' : '编辑') } } ], data3: [ { name: '哈哈', age: 18, address: '上海', $isEdit: false }, { name: '啦啦', age: 24, address: '北京', $isEdit: false } ] } }, methods: { // select_row(selection,index){ // console.log('select_row',selection,index) // this.$set(this.data3[index], '$isEdit', true) // }, handleEdit (row) { console.log('handleEdit',row); this.$set(row, '$isEdit', true) }, handleSave (row) { console.log('handleSave',row); this.$set(row, '$isEdit', false) } } }) </script> </body> </html>
  • 相关阅读:
    网页页面合适的大小
    Spring IO Platform简介及示例
    Spring Boot 单元测试详解+实战教程
    Spring Boot日志集成
    Spring Boot 16 条最佳实践
    Spring Boot自动配置原理、实战
    Spring Boot自动配置
    Windows10 IME占用过高临时解决办法
    GitLab版本管理
    大型系统重构的步骤梳理
  • 原文地址:https://www.cnblogs.com/hzx-5/p/11587165.html
Copyright © 2011-2022 走看看