zoukankan      html  css  js  c++  java
  • iview table嵌套table

    HTML:

      1 <!DOCTYPE html>
      2 <html>
      3 
      4 <head>
      5     <meta charset="utf-8">
      6     <title>iview example</title>
      7     <link rel="stylesheet" type="text/css" href="./iview/iview.css">
      8     <script type="text/javascript" src="./vue.min.js"></script>
      9     <script type="text/javascript" src="./iview/iview.js"></script>
     10     <script src="./expandRow.js"></script>
     11 </head>
     12 
     13 <body>
     14     <div id="app">
     15         <i-table :columns="columns" :data="data">
     16             <template slot-scope="{ row, index }" slot="name">
     17                 <Input type="text" v-model="editName" v-if="editIndex === index" />
     18                 <span v-else>{{ row.name }}</span>
     19             </template>
     20 
     21             <template slot-scope="{ row, index }" slot="age">
     22                 <Input type="text" v-model="editAge" v-if="editIndex === index" />
     23                 <span v-else>{{ row.age }}</span>
     24             </template>
     25 
     26             <template slot-scope="{ row, index }" slot="birthday">
     27                 <Input type="text" v-model="editBirthday" v-if="editIndex === index" />
     28                 <span v-else>{{ getBirthday(row.birthday) }}</span>
     29             </template>
     30 
     31             <template slot-scope="{ row, index }" slot="address">
     32                 <Input type="text" v-model="editAddress" v-if="editIndex === index" />
     33                 <span v-else>{{ row.address }}</span>
     34             </template>
     35 
     36             <template slot-scope="{ row, index }" slot="action">
     37                 <div v-if="editIndex === index">
     38                     <i-Button @click="handleSave(index)">保存</i-Button>
     39                     <i-Button @click="editIndex = -1">取消</i-Button>
     40                 </div>
     41                 <div v-else>
     42                     <i-Button @click="handleEdit(row, index)">操作</i-Button>
     43                 </div>
     44             </template>
     45         </i-table>
     46     </div>
     47     <script>
     48         new Vue({
     49             el: "#app",
     50             data: {
     51                 row: '',
     52                 columns: [
     53                     {
     54                         type: 'expand',
     55                          50,
     56                         render: (h, params) => {
     57                             return h("expandRow", { //标签名称也是子组件的名称
     58                                 props: {
     59                                     row: params.row //子组件传值
     60                                 }
     61                             })
     62                         }
     63                     },
     64                     {
     65                         title: '姓名',
     66                         slot: 'name'
     67                     },
     68                     {
     69                         title: '年龄',
     70                         slot: 'age'
     71                     },
     72                     {
     73                         title: '出生日期',
     74                         slot: 'birthday'
     75                     },
     76                     {
     77                         title: '地址',
     78                         slot: 'address'
     79                     },
     80                     {
     81                         title: '操作',
     82                         slot: 'action'
     83                     }
     84                 ],
     85                 data: [
     86                     {
     87                         name: '王小明',
     88                         age: 18,
     89                         birthday: '919526400000',
     90                         address: '北京市朝阳区芍药居'
     91                     },
     92                     {
     93                         name: '张小刚',
     94                         age: 25,
     95                         birthday: '696096000000',
     96                         address: '北京市海淀区西二旗'
     97                     },
     98                     {
     99                         name: '李小红',
    100                         age: 30,
    101                         birthday: '563472000000',
    102                         address: '上海市浦东新区世纪大道'
    103                     },
    104                     {
    105                         name: '周小伟',
    106                         age: 26,
    107                         birthday: '687024000000',
    108                         address: '深圳市南山区深南大道'
    109                     }
    110                 ],
    111                 editIndex: -1,  // 当前聚焦的输入框的行数
    112                 editName: '',  // 第一列输入框,当然聚焦的输入框的输入内容,与 data 分离避免重构的闪烁
    113                 editAge: '',  // 第二列输入框
    114                 editBirthday: '',  // 第三列输入框
    115                 editAddress: '',  // 第四列输入框
    116             },
    117             methods: {
    118                 handleEdit(row, index) {
    119                     this.editName = row.name;
    120                     this.editAge = row.age;
    121                     this.editAddress = row.address;
    122                     this.editBirthday = row.birthday;
    123                     this.editIndex = index;
    124                 },
    125                 handleSave(index) {
    126                     this.data[index].name = this.editName;
    127                     this.data[index].age = this.editAge;
    128                     this.data[index].birthday = this.editBirthday;
    129                     this.data[index].address = this.editAddress;
    130                     this.editIndex = -1;
    131                 },
    132                 getBirthday(birthday) {
    133                     const date = new Date(parseInt(birthday));
    134                     const year = date.getFullYear();
    135                     const month = date.getMonth() + 1;
    136                     const day = date.getDate();
    137                     return `${year}-${month}-${day}`;
    138                 }
    139             }
    140         })
    141     </script>
    142 </body>
    143 
    144 </html>

    javascript: (子组件在HTML中引入)

    Vue.component('expandRow', {//嵌套表格
        props: {
            row: Object
        },
        data: function () {
            return {
                //表头
                columns1: [
                    {
                        title: 'Name', key: 'name',
                        render: (h, params) => {
                            //判断name数据来实现不同的样式和添加方法
                            if (params.row.name === "John Brown") {
                                return h("span", { //标签名称
                                    style: {
                                        color: "#FC857F",//样式-不能写例如font-size 应写为fontSize
                                    },
                                }, params.row.name);//原始数据
                            } else if (params.row.name === "Jim Green") {
                                return h("span", {
                                    style: {
                                        color: "#41C3FF",
                                    },
                                }, params.row.name);
                            } else {
                                return h("span", {
                                    on:{
                                        //添加事件
                                        click:()=>{
                                            console.log(params.row);
                                        }
                                    }
                                }, params.row.name);
                            }
                           
                        }
                    },
                    { title: 'Age', key: 'age' },
                    { title: 'Address', key: 'address' },
                    { title: '时间', key: 'date' },
                    { title: '操作', key: 'action', slot: 'action' },
                ],
                //表格数据
                data1: [
                    {
                        name: 'John Brown',
                        age: 18,
                        address: 'New York No. 1 Lake Park',
                        date: '2016-10-03'
                    },
                    {
                        name: 'Jim Green',
                        age: 24,
                        address: 'London No. 1 Lake Park',
                        date: '2016-10-01'
                    },
                    {
                        name: 'Joe Black',
                        age: 30,
                        address: 'Sydney No. 1 Lake Park',
                        date: '2016-10-02'
                    },
                    {
                        name: 'Jon Snow',
                        age: 26,
                        address: 'Ottawa No. 2 Lake Park',
                        date: '2016-10-04'
                    }
                ]
            }
        },
        mounted: function () {
            // console.log(this.row);
        },
        methods: {
            handleEdit(row, index) {
                console.log(row);
                console.log(index);
            }
        },
        template: `
                <div>
                <!-- columns:表头; data:表格数据 -->
                    <i-table :columns="columns1" :data="data1">
                        <template slot-scope="{row,index}" slot="action"> <!-- slot:的值要和表头中这个字段的 slot相同 -->
                                <i-Button @click="handleEdit(row,index)">操作</i-Button>
                        </template>
                    </i-table>
                </div>
                `
    })
  • 相关阅读:
    【POJ 1958】 Strange Towers of Hanoi
    【HNOI 2003】 激光炸弹
    【POJ 3263】 Tallest Cow
    【POJ 2689】 Prime Distance
    【POJ 2777】 Count Color
    【POJ 1995】 Raising Modulo Numbers
    【POJ 1845】 Sumdiv
    6月16日省中集训题解
    【TJOI 2018】数学计算
    【POJ 1275】 Cashier Employment
  • 原文地址:https://www.cnblogs.com/sheep-fu/p/14658712.html
Copyright © 2011-2022 走看看