ElementUI----table 修改指定列颜色

效果图:

 

<el-table id="Table"

                    :data="tableData"

                    :cell-style="setCellColor"

                    border

                    style="width: 100%">

         .............................................

          </el-table>

 

    setCellColor({row,column,rowIndex,columnIndex}){

        if(columnIndex===3){

            return 'color:#239ce6;';

        }

    },

 

  • 6
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果你想要在 ElementUI-Plus 的 Table 树形结构中进行懒加载并判断是否有子节点数据,可以使用 `lazy` 属性和 `load` 方法实现。具体实现步骤如下: 1. 在 Table 组件中设置 `:lazy="true"`,开启懒加载模式。 2. 在 Table 组件中设置 `:load="loadData"`,指定加载数据的方法。 3. 在 `loadData` 方法中,根据当前节点的 `level` 和 `expanded` 状态来判断是否需要加载该节点的子节点数据。 4. 如果需要加载子节点数据,可以使用异步请求获取数据,并在回调中将数据作为参数传递给 `resolve` 方法。如果不需要加载子节点数据,可以直接调用 `resolve([])` 方法返回一个空数组。 下面是一个示例代码,帮助你更好地理解如何实现这个功能: ```vue <template> <el-table :data="data" :lazy="true" :load="loadData" tree-key="id" :tree-props="{children: 'children'}" > <el-table-column label="名称" prop="name"></el-table-column> <el-table-column label="状态" prop="status"></el-table-column> </el-table> </template> <script> export default { data() { return { data: [] } }, methods: { loadData(node, resolve) { if (node.level === 0) { // 根节点的数据 this.$http .get('/api/data') .then(response => { resolve(response.data) }) } else { // 非根节点的数据 if (node.expanded) { // 当前节点已经展开,需要加载子节点数据 this.$http .get(`/api/data/${node.data.id}`) .then(response => { resolve(response.data.children) }) } else { // 当前节点没有展开,无需加载子节点数据 resolve([]) } } } } } </script> ``` 在这个示例中,我们使用了 `resolve` 方法来返回异步获取的子节点数据或空数组。同时,我们还使用了 `node.level` 和 `node.expanded` 属性来判断当前节点的状态,从而决定是否需要加载子节点数据。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值