Tag:htmljavascriptvue.js
Article From:https://segmentfault.com/q/1010000012139955
Question:

Answer 0:

Look at this demo

<template>
    <v-table
            is-horizontal-resize
            style="width:100%"
            :columns="columns"
            :table-data="tableData"
            row-hover-color="#eee"
            row-click-color="#edf7ff"
            @on-custom-comp="customCompFunc"
    ></v-table>
</template>

<script>

    import Vue from 'vue'

    export default{
        data() {
            return {
                tableData: [
                        {"name":"Zhao Wei, "Tel": "156*****1987", "hobby": "piano, calligraphy, singing", "address": "17 floor, 569 Jinling East Road, Huangpu District, Shanghai"},{"name": "Li Wei", "Tel": "182*****1538", "hobby": "piano, calligraphy, singing", "address": "2 floor, 12 Lixin Road, South Bridge Town, Fengxian District, Shanghai"}.{"name": "Sun Wei", "Tel": "161*****0097", "hobby"): "piano, calligraphy, singing", "address": "No. 739 Bayi Road, Qiao Town, Chongming County, Shanghai"}.{"name": "Zhou Wei", "Tel": "197*****1123", "hobby"): "piano, calligraphy, singing", "address": "No. 24 Zhang Bang Road, Qingpu Town, Qingpu District, Shanghai"}.{"name": "Wu Wei", "Tel": "183*****6678", "hobby": "piano, calligraphy, singing", "address": "Ledu West Road, Songjiang District, Shanghai 86")7-871 "}"]Columns: [{Field:'custome', title:' serial number, width: 50, titleAlign:'center', columnAlign:'centeR',Formatter: function (rowData, rowIndex, pagingIndex, field) {Return rowIndex < 3?'< span style= "color:red; font-weight: bold;" > "+ (rowIndex + 1) +'< /span> ': rowIndex + 1}, isFrozen: true, isReSize:true},{field:'name', title:' name ', width: 80,TitleAlign:'center', columnAlign:'center', isResize:true},{field:'tel', titLe: 'mobile number', width: 150, titleAlign:'center', columnAlign:'center', isResize:true},{field:'hobby', title:' hobby ', width: 150, titleAlign:'center', columnAlign:'center', isResize:tRue},{field:'address', title:' address', width: 230, titleAlign:'center', columNAlign:'left', isResize:true},{field:'custome-adv', title:' operation ', width: 200,TitleAlign:'center', columnAlign:'center', componentName:'table-operation', isResize:true}]}},Methods:{CustomCompFunc (params) {Console.log (params);If (params.type = = ='delete') {/ / do delete operationThis.$delete (this.tableData, params.index);}else if (params.tYpe = = = ='edit') {/ / / do edit operationAlert (` line number: ${params.index} Name: ${params.rowData['name']}`)}}}}/ / custom column componentsVue.component ('tAble-operation', {Template:`< span>< a href= "" @click.stop.prevent= "update (R)OwData, index) "> edit < /a> & nbsp;< a href= "" @click.stop.prevent= "deleteRow (rowDat)A, index) "> delete < /a>< /span> `,Props:{RowData:{Type:Object},Field:{Type:String},Index:{Type:Number}},Methods:{UPDAte () {/ / parameter random construction based on business scenariosLet params = {type:'edit', index:this.index, rowData:this.rowData};This.$emit ('on-custom-comp', params);},DeleteRow () {/ / parameter random construction based on business scenariosLet params = {type:'delete', index:this.index};This.$emit ('on-custom-comp', params);}}})< /sCript>

Leave a Reply

Your email address will not be published. Required fields are marked *