<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 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐