难易程度 最易⭐️ 难⭐️⭐️⭐️⭐️⭐️
一:demo的使用:
方式一:(⭐️正常写死)
<h3>方式一</h3>
<el-table :data="tableData">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
data() {
return {
tableData: [{name: '王小虎',age: 18}, {name: '王小虎',age: 18}],
}
}
方式二:(⭐️⭐️使用column变量)
<h3>方式二</h3>
<el-table :data="tableData">
<el-table-column v-for="(item, index) in tableColumns" :key="index" :prop="item.prop" :label="item.label">
<template slot-scope="scope">
<my-render v-if="item.render" :render="item.render"></my-render>
<span v-else>{{ scope.row[item.prop] }} </span>
</template>
</el-table-column>
</el-table>
data() {
return {
tableData: [{name: '王小虎',age: 18}, {name: '王小虎',age: 18}],
tableColumns: [{prop: 'name', label: '名字'},{prop: 'age', label: '年龄'}]
}
}
方式三:(⭐️⭐️⭐️使用column变量 + 自定义组件)
<h3>方式三</h3>
<el-table :data="tableData">
<el-table-column v-for="(item, index) in tableColumns" :key="index" :prop="item.prop" :label="item.label">
<template slot-scope="scope">
<my-render v-if="item.render" :render="item.render"></my-render>
<span v-else>{{ scope.row[item.prop] }} </span>
</template>
</el-table-column>
</el-table>
import myRender from "./component/my-render.vue"
components: {
myRender
},
data() {
return {
tableData: [{name: '王小虎',age: 18}, {name: '王小虎',age: 18}],
tableColumns: [{prop: 'name', label: '名字'},{ label: '年龄',render: (h, param) => {return param.row.age;}}]
}
}
my-render组件 my-render.vue
<script>
export default {
render: (h, ctx) => {
let elem = <div>{ctx.props.render(h)}</div>;
return (elem)
}
};
</script>
方式四:(⭐️⭐️⭐️⭐️使用column变量 + 自定义组件 + 传参params的使用)
<h3>方式三</h3>
<el-table :data="tableData">
<el-table-column v-for="(item, index) in tableColumns" :key="index" :prop="item.prop" :label="item.label">
<template slot-scope="scope">
<my-render v-if="item.render" :sc="scope" :row="scope.row" :render="item.render"></my-render>
<span v-else>{{ scope.row[item.prop] }} </span>
</template>
</el-table-column>
</el-table>
import myRender from "./component/my-render.vue"
components: {
myRender
},
data() {
return {
tableData: [{name: '王小虎',age: 18}, {name: '王小虎',age: 18}],
tableColumns: [{prop: 'name', label: '名字'},{ label: '年龄',render: (h, param) => {return param.row.age;}},// 4、⭐️⭐️⭐️⭐️动态插入标签 + 动态属性值 + 动态属性 + 动态data值
{
label: '操作',
render: (h, param) => {
let redBtn= 'redBtn', bg= 'yellow';
const elem = <div><button class={redBtn} style={{background: bg}}>删除{param.row.name}</button></div>;
return (elem);
}
},]
}
}
my-render组件 my-render.vue
<script>
export default {
functional: true,
props: {
row: {
type: Object,
required: true
},
render: {
type: Function,
required: true
},
sc: {
type: Object,
required: true
}
},
render: (h, ctx) => {
const arr = [];
const params = {
row: ctx.props.row,
index: ctx.props.sc.$index
};
const VNode = ctx.props.render(h, params);
arr.push(VNode);
return h('div', arr, '');
}
};
</script>
二、demo里的方式四的tableColumns的使用写法详解:
windowName: "cxl",
tableData: [{name: '王小虎',age: 18}, {name: '王小虎',age: 18}],
tableColumns: [
// 1、⭐️直接显示
{prop: 'name', label: '名字'},
// 2、⭐️⭐️添加字符串转换显示
{
label: '年龄',
render: (h, param) => {
return param.row.age;
}
},
// 3、⭐️⭐️⭐️动态插入标签显示
{
label: '操作',
render: (h, param) => {
const elem = <div><button>新增</button></div>;
return (elem);
}
},
// 4、⭐️⭐️⭐️⭐️动态插入标签 + 动态属性值 + 动态属性 + 动态data值
{
label: '操作',
render: (h, param) => {
let redBtn= 'redBtn', bg= 'yellow';
const elem = <div><button class={redBtn} style={{background: bg}}>删除{param.row.name}</button></div>;
return (elem);
}
},
// 5、⭐️⭐️⭐️⭐️⭐️【之jsx写法a】动态插入标签 + 事件显示
{
label: '操作',
render: (h, param) => {
let that = this;
function logFunc() {
// console.log("点击删除" + param.row.name, that.windowName)
console.log("点击", param) // = {"row": {"name": "王小虎","age": 18},"index": 0}
}
const elem = <div><button onClick={logFunc}>删除</button></div>;
return (elem);
}
},
// 5、⭐️⭐️⭐️⭐️⭐️【之render函数写法b】动态插入标签 + 事件显示
{
label: '操作',
render: (h, param) => { // params是操作返回的
const delBtn = h('button', {
class: 'operate-btn',
domProps: {
innerHTML: '删除'
},
on: {
click: () => {
// console.log("点击删除" + param.row.name, that.windowName);
console.log("点击", param) // = {"row": {"name": "王小虎","age": 18},"index": 0}
}
}
});
return h('div', [delBtn]);
}
},
]
三、demo里方式四里my-render组件,自定义render组件的写法详解
1、直接返回function
render: (h, ctx) => {
let elem = <div>{ctx.props.render(h)}</div>;
return (elem)
}
2、返回function + params
props: {
row: {
type: Object,
required: true
},
render: {
type: Function,
required: true
},
sc: {
type: Object,
required: true
}
},
render: (h, ctx) => {
const arr = [];
const params = {
row: ctx.props.row,
index: ctx.props.sc.$index
};
const VNode = ctx.props.render(h, params); //parmas 可以把参数传回给二中的tableColumns使用,
arr.push(VNode);
return h('div', arr, '');
},
tableColumns: [
// 4、⭐️⭐️⭐️⭐️ 操作parmas
{
label: 'parmas',
render: (h, param) => {
const elem = <div>{param.index} {JSON.stringify(param.row)} </div>;
return (elem);
}
},