table组件封装 入门学习-13

春风吹又生1127
98 阅读1分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第13天，点击查看活动详情

远程排序sortBy属性

sortable 远程排序sortBy属性，如果设置为 custom，则代表用户希望远程排序,我们就可以这样去设置sort: "custom",并通过Table 的 sort-change 事件去监听,sort-change 事件返回三个参数，分别是 column, prop, order，column就是table的一大堆数据，prop就是对应prop字段，column就是代表升序还是降序

    <el-table 
    :data="tableData" 
    style="width: 100%"
    @selection-change="handleSelectionChange"
    @sort-change="sortChange"
    >
    
    <el-table-column v-if="index" type="index" width="40px"></el-table-column>
    <el-table-column v-if="checkbox" type="selection" width="40px"></el-table-column>
    
    <template v-for="item in column">
    <el-table-column  v-if="item.type === 'function'" :key="item.prop" :prop="item.prop" :label="item.label">
        <template slot-scope="{row}">
            <div v-html="item.callback && item.callback(row)"></div>
        </template>
    </el-table-column>
    <el-table-column v-if="item.type === 'slot'" :key="item.prop" :prop="item.prop" :label="item.label">
        <template slot-scope="{row}">
            <slot :name="item.slot_name" :data="row"></slot>
        </template>
    </el-table-column>
    <el-table-column :sortable="item.sort" v-else :key="item.prop" :prop="item.prop" :label="item.label"></el-table-column>

    </template>
    </el-table>
    //script
       sortChange({column, prop, order}) {
            console.log('column',column);
            console.log('prop',prop);
            console.log('order',order);
        }

5d3f21a00ec3522e0f2285dd08cd9f7.png

fc4d8a34c2899d544a0db56dd2b432b.png

sort-by指定数据按照哪个属性进行排序，仅当 sortable 设置为 true 且没有设置 sort-method 的时候有效

<el-table-column :sort-by="item.sort_by" :sortable="item.sort" v-else :key="item.prop" :prop="item.prop" :label="item.label"></el-table-column>

76623bb60049049dd9af51d0dfa27ce.png

我们定义sort_by,就可以在sort-change中的column参数获取到

082cc4c2a911387d889722c7442cb14.png

这时候我们就可以调用远程接口去排序了，我们就传sort_by(指定数据按照哪个属性进行排序) 和 order(升降序)这两个值给后端就可以了，后端拿到所需要的排序数据，我们在重新渲染就ok了

       sortChange({column, prop, order}) {
            const sort_by = column.sortBy
            console.log(sort_by,order);
        }

附完整代码

<template>
  <a-table ref="table" on-load :check-list.sync="check_list"  :format="formatData" @onload="onload" index :checkbox="true" :init-request="false" :column="column" :data="data_1" :params="data_2" url="/api/home" method="get">
    <template v-slot:operation="slot">
        <el-button type="primary">编辑</el-button>
        <el-button @click="jumn(slot.data)">删除</el-button>
    </template>
  </a-table>
</template>
<script>
export default {
  name: "Home",
  components: {
    "a-table": () => import("@/components/table/index"),
  },
  data() {
    return {
        check_list: [],
        data_1: {
            name: 22
        },
        data_2: {
            name: 255555
        },
    column: [
        { 
            
            label: "URL地址", 
            sort: "custom",
            prop: "date" ,
            sort_by: 'aaaa'
        },
        { label: "姓名", prop: "name" },
        { label: "地址", prop: "address" },
        {
            type: 'slot',
            label: "操作",
            prop: 'operation',
            slot_name: "operation"
        }
      ],
    };
  },
  watch: {
    check_list: {
      handler(n, o) {
        console.log(111,n);
      }
    }
  },
  mounted() {
    setTimeout(() => {
        this.$refs.table.handlerRequest()
    },2000)
  },
  methods: {
    jumn(data) {
        console.log(data);
    },
    //打印回调的结果
    onload(data) {
        console.log(data);
    },
    formatData(data) {
       const request_data = [data[0]]
       return request_data
    }
  }
};
</script>

<template>
    <el-table 
    :data="tableData" 
    style="width: 100%"
    @selection-change="handleSelectionChange"
    @sort-change="sortChange"
    >
    
    <el-table-column v-if="index" type="index" width="40px"></el-table-column>
    <el-table-column v-if="checkbox" type="selection" width="40px"></el-table-column>
    
    <template v-for="item in column">
    <el-table-column :sort-by="item.sort_by" v-if="item.type === 'function'" :key="item.prop" :prop="item.prop" :label="item.label">
        <template slot-scope="{row}">
            <div v-html="item.callback && item.callback(row)"></div>
        </template>
    </el-table-column>
    <el-table-column v-if="item.type === 'slot'" :key="item.prop" :prop="item.prop" :label="item.label">
        <template slot-scope="{row}">
            <slot :name="item.slot_name" :data="row"></slot>
        </template>
    </el-table-column>
    <el-table-column :sort-by="item.sort_by" :sortable="item.sort" v-else :key="item.prop" :prop="item.prop" :label="item.label"></el-table-column>

    </template>
    </el-table>
</template>
<script>
export default {
    name: "Table",
    props: {
        checkList: {
            type:Array,
            default: () => []
        },
        column: {
            type: Array,
            default: () => []
        },
        checkbox: {
            type: Boolean,
            default: true
        },
        initRequest: {
            type: Boolean,
            default: true
        },
        url:{
            type: String,
            default: "",
            require: true
        },
        method: {
            type: String,
            default: "post",
            require: true
        },
        data: {
            type: Object,
            default: () => {}
        },
        params: {
            type: Object,
            default: () => {}
        },
        format: Function,
        index: Boolean,
        onLoad: Boolean,//默认是fasle
    },
    data() {
    return {
        tableData: [],
    };
},
    beforeMount() {
        this.initRequest && this.getTableList()
    },
    methods: {
        getTableList() {
            const url = this.url
            if(!url) {
                console.log("请求地址不存在");
                return false
            }
            const request_data = {
                url: this.url,
                method: this.method
            }
            if(JSON.stringify(this.data) != '{}') {
                request_data.data = this.data
            }
            if(JSON.stringify(this.params) != '{}') {
                request_data.params = this.params
            }
            
            this.$axios({request_data}).then((Response => {
                let request_data = Response.data
                if(this.format && typeof this.format=== 'function') {
                    request_data = this.format(Response.data)                  
                }
                this.tableData = request_data             
                   //回调数据
                this.onLoad && this.$emit("onload",Response.data) 

                }))
        },
        handlerRequest() {
            this.getTableList()
        },
        handleSelectionChange(val) {
            this.$emit("update:checkList",val)
        },
        sortChange({column, prop, order}) {
            const sort_by = column.sortBy
            console.log(sort_by,order);
        }
    }
};
</script>
avatar
文章
阅读
粉丝