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

自定义渲染文本

当我们需要一些标签，图片等想展示出来的时候，目前就需要在这个基础的定义不同的类型去处理，这是我们目前的文本

首先我们先定义一个函数的类型，通过回调函数返回

<script>
export default {
  name: "Home",
  components: {
    "a-table": () => import("@/components/table/index"),
  },
  data() {
    return {
      column: [
        { 
            type: 'function',
            label: "URL地址", 
            prop: "date" ,
            callback: () => {
                return 11
            }
        },
        { label: "姓名", prop: "name" },
        { label: "地址", prop: "address" },
      ],
    };
  },
};
</script>

在我们组件中,再复制一个el-table-column,目前先这样写，之后再用动态组件的方式，我们在循环的 时候，通过if判断，在for和if在同一个标签的时候，建议重新写在template 里面，如果我们想渲染格式的话，只需要在嵌套一层template,看代码

  <el-table-column v-for="item in column" :key="item.prop" :prop="item.prop" :label="item.label"></el-table-column>
  <el-table-column v-for="item in column" :key="item.prop" :prop="item.prop" :label="item.label"></el-table-column>

<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()"></div>
        </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>

我们在callback中返回的11,这时候就显示出来了

这样也可以table的数据,通过callback传过来,这样就应该执行一些操作了,换行 时间格式等,之后封装的过程使用动态组件就ok了

      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" },
      ],

附完整代码

<template>
  <a-table index :checkbox="false" :column="column"></a-table>
</template>
<script>
export default {
  name: "Home",
  components: {
    "a-table": () => import("@/components/table/index"),
  },
  data() {
    return {
      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" },
      ],
    };
  },
};
</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-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
        },
        index: Boolean,
    },
    data() {
    return {
        tableData: [
        {
            date: "2016-05-02",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
        },
        {
            date: "2016-05-04",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1517 弄",
        },
        {
            date: "2016-05-01",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1519 弄",
        },
        {
            date: "2016-05-03",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1516 弄",
        },
        ],
    };
},
};
</script>