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>
    

    如圖：