table组件封装 入门学习-10

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

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

模拟借口请求

我们可以自定义接口和请求，通过url和method传给组件

<template>
  <a-table index :checkbox="false" :column="column" 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>

    props: {
        url:{
            type: String,
            default: "",
            require: true
        },
        method: {
            type: String,
            default: "post",
            require: true
        },
    },

这里我们通过 axios 来发送请求，我们在初始数据的就先获取，这里使用beforeMount

    beforeMount() {
        this.getTableList()
    },
    methods: {
        getTableList() {
            const url = this.url
            if(!url) {
                console.log("请求地址不存在");
                return false
            }
            this.$axios({
                url: this.url,
                method: this.method
            }).then((Response => {
                this.tableData = Response.data
            }))
        }
    }

接口传参

传参的方式我们分为 data 和 params 两种形式

<template>
  <a-table index :checkbox="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>

  data() {
    return {
        data_1: {
            name: 22
        },
        data_2: {
            name: 255555
        },
       }

Table组件我们来接收一下，并通过SON.stringify(xxx) != '{}'来判断是否为字符串不为空

    props: {
        data: {
            type: Object,
            default: () => {}
        },
        params: {
            type: Object,
            default: () => {}
        },,
    },

        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 => {
                this.tableData = Response.data
            }))
        }

从图片我们看出name：22为data类型，name: 255555为params类型

36dba091a4570755e66c3a42f6ce6fb.png

 初始化请求和手动请求

1、初始化请求 上面我们是默认就开始请求，我们在此基础上优化一下，我们传一个:init-request="false"的值去做判断

<template>
  <a-table index :checkbox="false" :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>

这样我们就可以控制 请求的状态

    props: {,
        initRequest: {
            type: Boolean,
            default: true
        }
    },
        beforeMount() {
        this.initRequest && this.getTableList()
    },

2、手动请求 通过在组件中定义的ref去手动请求

<template>
  <a-table ref="table" index :checkbox="false" :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 {
  mounted() {
    setTimeout(() => {
        this.$refs.table.handlerRequest()
    },2000)
  },

</script>

在组件中定义的方法

    handlerRequest() {
            this.getTableList()
        }

附完整代码

<template>
  <a-table ref="table" index :checkbox="false" :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 {
        data_1: {
            name: 22
        },
        data_2: {
            name: 255555
        },
    column: [
        { 
            type: 'function',
            label: "URL地址", 
            prop: "date" ,
            callback: (data) => {
                return `<a href="https://www.taobao.com/">${data.name}</a>`
            }
        },
        { label: "姓名", prop: "name" },
        { label: "地址", prop: "address" },
        {
            type: 'slot',
            label: "操作",
            prop: 'operation',
            slot_name: "operation"
        }
      ],
    };
  },
  mounted() {
    setTimeout(() => {
        this.$refs.table.handlerRequest()
    },2000)
  },
  methods: {
    jumn(data) {
        console.log(data);
    }
  }
};
</script>

<template>
    <el-table :data="tableData" style="width: 100%">
    <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 v-else :key="item.prop" :prop="item.prop" :label="item.label"></el-table-column>

    </template>
    </el-table>
</template>
<script>
export default {
    name: "Table",
    props: {
        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: () => {}
        },
        index: Boolean,
    },
    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 => {
                this.tableData = Response.data
            }))
        },
        handlerRequest() {
            this.getTableList()
        }
    }
};
</script>
avatar
文章
阅读
粉丝