iview+table自定义显示内容及样式

iview

• table

  • 根据条件渲染显示内容与颜色

     data() {
       //在data里面let that  绑定this指向
        let that = this;
         return{
             columns:[
                 {
              title: "是否启用",
              key: "isDisabled",
              align: "center",
              render: (h, params) => {
                return h(
                  "span",
                  {
                      //自定义显示的颜色
                    style: {
                      color: params.row.isDisabled === 0 ? "#2d8cf0" : "#ed3f14",
                      cursor: "pointer",
                    },
                      //点击事件
                    on: {
                      click: function () {
                        let title = params.row.isDisabled === 0 ? "关闭" : "开启";
                          //这里就可以使用that代替this
                        that.$Modal.confirm({
                          title: title,
                          content: `<p>您确定要${title}吗？</p>`,
                          onOk: () => {
                            console.log("///////");
                          },
                          onCancel: () => {
                            that.$Message.info("取消删除");
                          },
                        });
                      },
                    },
                  },
                    //自定义显示内容
                  params.row.isDisabled === 0 ? "已启用" : "已关闭"
                );
              },
            },
             ]
         }
     }
    
    

  • 在表格里面自定义单元格显示内容格式

    data(){
        return{
            columns:[
                {
                     {
              			title: "项目",
                    	//可以使用slot
              			slot: "userProject",
              			align: "center",
           			 },
                }
            ]
        }
    }
    

     <!-- slot对应data里面的slot-->
    <template slot-scope="{ row }" slot="userProject">
          <Tree :data="row.userProject" ref="tree1"></Tree>
     </template>
    

    如图：