el-table-v2 element plus 表格虚拟滚动渲染选择器
需要的引入 特殊项中用到的element的其他组件,vue的组件使用vue的引入方法,引入h函数构造vnode。
·
<el-table-v2
:data="data"
:columns="Columns"
:width="700"
:height="400"
fixed
:row-class="importRowClass"
border
style="width: 100%"
>
data中
data:(){
return {
data[{
name:'lihua',
age:18,
isVisible:false,
id:0
},{
name:'lihua',
age:18,
isVisible:false,
id:1
},{
name:'lihua',
age:18,
isVisible:false,
id:2
}],
Columns:[]
}
}
需要的引入 特殊项中用到的element的其他组件,vue的组件使用vue的引入方法,引入h函数构造vnode
import { ElCheckbox, ElButton } from "element-plus";
import { ref, h } from "vue";
渲染列
//渲染前函数
//普通列
this.Columns = [
{ key: "selection", dataKey: "name", title: "名称", width: 150 },
];
//需要插入其他组件或dom节点的列依靠于自带的自定义属性cellRenderer 返回的结果需要是vnode(dom)节点,vue中可以使用jxs或h函数构造,构造属性vue3官网有参考
this.importColumns.unshift({
key: "handle",
dataKey: "age",
title: "年龄",
width: 150,
cellRenderer: (isReset) => {
return h(
'div',
{
style:{color:isReset.cellData>'18'?'green':'red'}
},
isReset.cellData
);
},
});
this.importColumns.unshift({
key: "handle",
dataKey: "isReset",
title: "状态",
width: 50,
//特殊列操作函数此处为选择器
cellRenderer: (value) => {
if (value.cellData !== undefined) {
return h(ElCheckbox, {
modelValue: value.cellData,
"onUpdate:modelValue": (value) => {
this.importConfigDataMessage[value.rowData.id].isReset = value;
},
});
}
},
//特殊列的表头,此为全选。
headerCellRenderer: (value) => {
const _data = unref(this.importConfigDataMessage);
const onChange = (value) => {
this.importConfigDataMessage.value = _data.map((row) => {
row.isReset = value;
return row;
});
};
const allSelected = _data.every((row) => row.isReset);
const containsChecked = _data.some((row) => row.isReset);
return h(ElCheckbox, {
onChange: onChange,
value: allSelected,
intermediate: containsChecked && !allSelected,
});
},
});
});
更多推荐
已为社区贡献4条内容
所有评论(0)