I want to dynamically customize the contents of the columns in the table according to the value of tableKey in data. Different columns generate different contents, including different HTML tags. I don"t know how to do it, for example, how to replace the gender value in the table from 1 ~ 0 to Chinese characters for men and women, and add the tag el-tag, code as follows:
<div id="app">
<el-table :data="items" border>
<el-table-column v-for="(item,key) in tableKey"
:key="key"
:prop="item.value"
:label="item.label" v-if="!item.tp">
</el-table-column>
<el-table-column :key="key" :prop="item.value" :label="item.label" v-else>
<template slot-scope="scope" :render="item.render(scope.row)">
</template>
</el-table-column>
</el-table>
</div>
<script>
new Vue({
el: "-sharpapp",
data:{
items: [{ name: "steven", age: 36, sex: 1},
{name: "xixi", age: 5, sex: 0}
],
visible : false,
value1: "",
tableKey: [
{ label: "", value: "name", tp: false },
{ label: "", value: "age", tp: false },
{ label: "", value: "sex", tp: true,
render: (h, parms) => {
return h("el-tag", {
props: {
type: "success",
size: "mini",
},
}, parms.row.status === 1 ? "" : "")
},
},
],
},
})
</script>
