el-table-v2 element plus 表格虚拟滚动渲染选择器
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
<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,
});
},
});
});
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献3条内容
所有评论(0)