Article From:https://segmentfault.com/q/1010000011126160
Question:

The checkbox component was used in the table component of iview, and now you want to click the checkbox to update the original data data of the table, but the update failed.

                    {
                        align: 'center',
                        title: 'Power ',Key:'power',Render: (h, params) => {Var self = thisConst row = params.row;Let power = row.powerReturn H ('Checkbox', {Props: {Value: power,}});}},

checkboxAfter modification, a save method is provided, which is the way to print this.data and finds that the data in data is unchanged. Why is this how to update data’s data


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue/vue.js"></script>
    <script src="../vue/iview/js/iview.min.js"></script>
    <script src="../vue/axios/axios.min.js"></script>
    <link rel="stylesheet" href="../vue/iview/css/iview.css">
    <script src="../jquery/jquery-3.1.1.min.js"></script>
    <script src="../bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <style>
        .center {
            text-align: center;
        }

        .row {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
<div class="container">
    <div id="app">
        <div class="row">
            <h1 class="center">Interface configuration page < /h1>< /div>< div class= "row" >< i-table BordeR: columns= "columns4": data= "data1" > < /i-table>< Page: total= "totalNum" show-Sizer @on-change= "changPage" style= "float: right" simple> < /Page>< /div>< div class= "row" >< Row type= "flex" justify= "center" align= "middle" >< i-col span= "12" class= "center" ><! - to save --> in the database;< I-button @click= "save" > save < /i-button>< /i-col>< i-col span= "12" class= "center" ><! - jump to the interface page -->< a href= ">"; generate interface page < /a>< /i-col>< /Row>< /div>< /div>< /div>< script>New Vue ({El:'#app',Data () {Return {TotalNum: 100,Columns4: [{Align:'center',Title: 'power station number',Key:'plantName',},{Align:'center',Title: 'power',Key:'poweR',Render: (h, params) => {Let self = this;Return H ('Checkbox', {DomProps: {Value: params.row.power,},On: {'input': function (event) {Const index = params.index;Self.data1[index].power = event}}});}},{Align:'center',Title: 'weather',Key:'environ',Render: (h, params) => {Let self = this;Return H ('Checkbox', {DomProps: {Value: params.row.environ},On: {'input': FUnction (event) {Const index = params.index;Self.data1[index].environ = event}}});}},{Align:'center',Title: 'electricity',Key:'gen',Render: (h, params) => {Let self = this;Return H ('Checkbox', {DomProps: {Value: params.row.gen},On: {'input': function (event) {Const index = params.indEx;Self.data1[index].gen = event}}});}},]Data1: [{PlantName:'11',Power: false,EnviRon: true,Gen: true},{PlantName:'12',Power: true,Environ:True,Gen: true},]}},Methods: {Save () {Const datas = this.data1For (let X in datas) {Alert (datas[x].plantName + "+ datas[x].power+ "" + datas[x].environ + "+ datas[x].gen")}},GetData () {Axios.get ('../json/plant.json').Then (function (data) {/ / Alert (data.data[0].id)})},ChangPage () {}},Created () {This.getData ()}})< /scripT>< /body>< /html>

Answer 0:

Your writing is only one-way, not bidirectional, that is, it does not change the state of the parent.
Need to be monitored againinput Event.

Answer 1:

The reason is found, because the data property under table is not updated, and props is not a bidirectional binding like V-model, and on should be added under render, which is received by the $emit submitted to table.

Answer 2:

{

      title: "Operation ",Key: "doctorFlag",Width: 100,Align: "center",Render: (h, params) =&gT; {Return H ("Checkbox", {Props: {Value: params.row.doctorFlag},On: {'input': function (event) {Const index = params.Index;Console.log (index, event);}}});}}Binding data:{"DoctorId": "0003","DoctorName": "Wang Lao Wu","DoctorImg": "https://timGsa.baidu.com/timg? Image& quality=80& size=b9999_10000& sec=1516695049& di=038ab8cd12fbcC1b7478be874881a49c& imgtype=jpg& er=1& src=http%3A%2F%2Fp5.zbjimg.com%2Ftask%2F2011-10%2F16%2F1151098%2Fhuge4e9a7957ea33f.jpg ","DoctorDepart": "section list","DoctorFinance": "surgery","DoCtorFlag ": false},The format is as follows.The data in data is blooean. If it is a string, it must be processed again, otherwise, it will fall into the pit.